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

【问题标题】：Change image in center of page when hover on text next to it将鼠标悬停在旁边的文本上时更改页面中心的图像
【发布时间】：2016-09-16 04:03:36
【问题描述】：

我可以看到有人问过类似的问题，但我无法弄清楚。

我正在 wordpress 中处理此页面，其中有一系列 6 个问题和中间的指南针图像。我希望罗盘图像发生变化，以便当问题悬停在指向该问题的罗盘的不同图像上时。

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

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

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

【问题讨论】：

请为您的问题提供一个小提琴
到目前为止你有什么尝试？我从不看外部链接。请分享您的代码：D
您好，如果我们尝试仅使用 css 执行此操作会更复杂。一点点 javascript 实际上使它变得非常简单。

标签： html css wordpress image

【解决方案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>

【讨论】：

感谢大家迄今为止的帮助。我在这里做了我的第一个小提琴：jsfiddle.net/stuart79/t5vgq6sv 我刚刚从 wordpress 复制和粘贴的 html，所以那里有很多由主题添加的类。 CSS 是我对上面@Andrew 演示的解释。
另外我没有使用 javascript，因为我似乎无法让它在 wordpress 中工作，但我愿意接受建议。非常感谢您迄今为止的帮助！