Question

我正在尝试创建一个交互式地图，当您将鼠标悬停在某些大洲上时，它们会在上面高亮显示，并且我正在使用多张图片来这样做。具体来说，当我将鼠标悬停在背景的某些部分上时，我尝试将背景图像设置为一格。

在CSS代码中，我使用的是波浪号选择器，但它似乎不起作用。您能帮我找到问题吗？

HTML代码：

<html>
<div class="map">
 <div class="americas">
 </div>

 <div class="emeari">
 </div>

 <div class="emeari2">
 </div>

 <div class="ap">
 </div>
</div>
</html>

CSS代码：

 .map {
  position:fixed;
  background-image: url(World_Map.jpg); 
  width:960px;
  height:540px;
 }


.americas {
  position:absolute;
  width:364.8px;
  height:540px;
  border: 1px solid black;
}

.emeari {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
  border: 1px solid black;
}

.emeari2 {
  position:absolute;
  width:297.6px;
  height:183.6px;
  right: 0px;
  border: 1px solid black;
}

.ap {
  position:absolute;
  width:297.6px;
  height:356.4px;
  bottom: 0px;
  right: 0px;
  border: 1px solid black;
}


/* Hover */

.americas:hover ~ .map{
  background-image: url(Americas_Map.jpg);
}

.emeari:hover ~ .map{
  background-image: url(Emeari_Map.jpg);
}

.emeari2:hover ~ .map{
  background-image: url(Emeari_Map.jpg);
}

.ap:hover ~ .map{
  background-image: url(Asia_Map.jpg);
}

感谢您的帮助！

Answer 1

~选择器是兄弟选择器，它只能选择相同级别的元素。在您的代码中.map是父元素，并且CSS中没有“父”选择器。

不过，您可以通过在内部移动.map并将其包装在容器元素中来解决此问题。

.map,
.map-wrapper {
  position:fixed;
  width:960px;
  height:540px;
}

.map {
  background-image: url(World_Map.jpg);
  z-index: -1;
}


.americas {
  position:absolute;
  width:364.8px;
  height:540px;
  border: 1px solid black;
}

.emeari {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
  border: 1px solid black;
}

.emeari2 {
  position:absolute;
  width:297.6px;
  height:183.6px;
  right: 0px;
  border: 1px solid black;
}

.ap {
  position:absolute;
  width:297.6px;
  height:356.4px;
  bottom: 0px;
  right: 0px;
  border: 1px solid black;
}


/* Hover */

.americas:hover ~ .map{
  background-image: url(Americas_Map.jpg);
}

.emeari:hover ~ .map{
  background-image: url(Emeari_Map.jpg);
}

.emeari2:hover ~ .map{
  background-image: url(Emeari_Map.jpg);
}

.ap:hover ~ .map{
  background-image: url(Asia_Map.jpg);
}

<div class="map-wrapper">
   <div class="americas"></div>

   <div class="emeari"></div>

   <div class="emeari2"></div>

   <div class="ap"></div>
   
   <div class="map"></div>
</div>

Answer 2

不幸的是，当前CSS中没有父选择器，但是您可以使用JS来实现。在此示例中，我使用jQuery更新父级的背景色（您必须更新背景图片）。

WORKING FIDDLE

HTML：

<div class="map">
 <div class="americas">
 </div>

 <div class="emeari">
 </div>

 <div class="emeari2">
 </div>

 <div class="ap">
 </div>
</div>

CSS

.map {
  position:fixed;
  background-image: url(World_Map.jpg); 
  width:960px;
  height:540px;
 }


.americas {
  position:absolute;
  width:364.8px;
  height:540px;
  border: 1px solid black;
}

.emeari {
  position: absolute;
  width: 297.6px;
  height: 540px;
  left: 364.8px;
  border: 1px solid black;
}

.emeari2 {
  position:absolute;
  width:297.6px;
  height:183.6px;
  right: 0px;
  border: 1px solid black;
}

.ap {
  position:absolute;
  width:297.6px;
  height:356.4px;
  bottom: 0px;
  right: 0px;
  border: 1px solid black;
}

JS

$(".americas").hover(function () {
    $(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
});

$(".emeari").hover(function () {
    $(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
});

$(".emeari2").hover(function () {
    $(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
});

$(".ap").hover(function () {
    $(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
});

将鼠标悬停在另一个div上时更改div背景图片

2 个答案: