Question

我可以看到类似的问题已被问到但我无法弄明白。

我正在wordpress的这个页面上工作，其中有一系列的6个问题和一个指南针在中间的图像。我希望指南针图像能够改变，这样当问题悬停在指南针的另一个图像上时，就会显示指向问题。

页面位于：http://wearecreativecreatures.com/2016/what-do-we-offer/#questions

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

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

Answer 1

如果你只是想要CSS，你会想要这样的东西（我会把造型留给你）

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

将鼠标悬停在旁边的文字上时，可以在页面中心更改图像

1 个答案: