html - 将鼠标悬停在旁边的文本上时更改页面中心的图像

Question

我可以看到有人问过类似的问题，但我想不通。

我正在 wordpress 的这个页面上工作，其中有一系列 6 个问题，中间有一个指南针图像。我希望罗盘图像发生变化，以便在将问题悬停在不同的罗盘图像上时显示指向该问题的图像。

页面在这里:http://wearecreativecreatures.com/2016/what-do-we-offer/#questions

我在网上看到过这个版本，但似乎不必要地复杂:http://leiperscreekgallery.com/artists/

我希望只使用 CSS 来做到这一点。任何帮助将不胜感激。

Answer 1

如果你只想要 CSS，你会想要这样的东西(我会把样式留给你)

但是有一些方法可以使用纯 JS(因此不需要库)来实现这一点，这可能会使开发变得更容易。

.image-container {
  border: 25px solid #ccc;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}
.image-text {
  padding: 5px;
  background: #ccc;
  border: 1px solid;
  margin: 1px;
  cursor: pointer;
}
.image-text:hover {
  background: #eee;
  border-color: #333;
}
.image-text.leaf:hover ~ .image-container {
  background-image: url('http://www.balitaza.com/wp-content/uploads/2015/02/Neem-Leaves.jpg');
}
.image-text.grass:hover ~ .image-container {
  background-image: url('http://mitchtrale.com/endlessgrass/images/grass5.jpg');
}
.image-text.forest:hover ~ .image-container {
  background-image: url('http://i.ebayimg.com/00/s/MTYwMFgxNjAw/$(KGrHqF,!jcFC3rBNy3PBQwnG-Wy9g~~60_35.JPG');
}
.f-left {
  float: left;
}
.f-right {
  float: right;
}

<span class="image-text leaf f-left" href="#">Leaf!!!</span>
<span class="image-text grass f-left" href="#">Grass!!!</span>
<span class="image-text forest f-left" href="#">Forest!!!</span>
<span class="image-text forest f-right" href="#">Forest!!!</span>
<span class="image-text grass f-right" href="#">Grass!!!</span>
<span class="image-text leaf f-right" href="#">Leaf!!!</span>

<div class="image-container"></div>