这是任务：
创建一个网页，左边显示斯堪的纳维亚地图，右边显示空白元素。在这里，将地图用作元素中的背景图像是一个好主意。为四面旗帜中的每一面添加圆形元素(提示：边界半径(，并将它们放在它们所属的国家上方(提示：位置(。将鼠标指针悬停在标志上时添加效果。例如，您可以将箭头更改为一只手，并且可以对元素执行某些操作，以清楚地表明您正在握住它们。向每个标志添加一个单击事件。当单击某个标志时，右侧的元素中应显示一个关于该国家的文本。文本必须包含有关国家的信息，并且必须至少包含地区、人口、货币和资本
我所剩下的就是让点击的国家的文本出现在地图的右侧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,*::before,*::after{
box-sizing: border-box;
}
.container{
display: flex;
}
.container>div:first-child{
position: relative;
height: 500px;
width:500px;
padding:1rem;
background-color: #eee;
background-image:url(./Oppgave2/Skandinavia.png);
background-position: center;
background-size:contain;
background-repeat:no-repeat;
}
.container>div:first-child .flag{
width: 32px;
height: 32px;
position:absolute;
border-radius: 50%;
background-color: #fff;
padding:0.1rem;
}
.container>div:first-child img{
width: 28px;
height: 28px;
border-radius: 50%;
}
.container>div:first-child img:hover{
cursor:pointer;
transform:scale(1.2);
}
.norway{
top: 300px;
left: 126px;
}
.finland{
top:234px;
left: 350px;
}
.sweden{
top:282px;
left: 203px;
}
.denmark{
top:447px;
left: 120px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="flag norway" >
<img src="./Oppgave2/Norge.png" alt="Norway">
</div>
<div class="flag denmark">
<img src="./Oppgave2/Danmark.png" alt="Denmark">
</div>
<div class="flag sweden">
<img src="./Oppgave2/Sverige.png" alt="Sweden">
</div>
<div class="flag finland">
<img src="./Oppgave2/Finland.png" alt="Finland">
</div>
</div>
<div>
</div>
</div>
<script>
</script>
</body>
</html>我所剩下的就是当我点击国家时，得到关于我想点击的国家的文本，显示在地图的右侧。因此，如果我想点击挪威，它应该在地图的右侧显示一个包含挪威信息的文本。瑞典、丹麦和芬兰的国旗也是如此。
您可以使用：focus pseudo在点击事件后显示详细信息。此外，还必须将tabindex属性添加到要单击的元素中。