javascript - 如何在 Javascript 和/或 CSS 中将鼠标悬停在列表中的相应单词上时显示不同的图像？

Question

我有一个“系列”列表，当用户将鼠标悬停在列表中的系列名称上时，我希望弹出与所述系列相关的图像。我还希望它以 .5s 的 transition 弹出。

我遇到了一个问题 22，如果我在 CSS 中使用悬停效果并从 display: none; -> display: block; 我不能动画，但如果我从 opacity: 0; -> opacity: 1; 开始，图像必须是子元素，当用户将鼠标悬停在它们的绝对位置上时，它们也会出现，而我只希望它们在悬停在相应的词上时出现。

我发现的每个解决方案都涉及使用这两种技术中的一种，或者仅引用将鼠标悬停在整个部分上时出现的单个图像，因此我正在寻找 Javascript 解决方案。

li img {
    opacity: 0;
    transition: opacity 0.5s;
    display: none;
}

a.s1:hover img {
    opacity: 1; 
    display: block;
}

a.s2:hover img {
    opacity: 1;
    display: block;
}

<a href="series-1.html" class="s1">Series 1
    <div class="images">
    <div class="image1">
        <img src="image1.jpg">
    </div>
    <div class="image2">
        <img src="image2.jpg">
    </div>
    </div>
</a>

<a href="series-2.html" class="s2">Series 2
    <div class="images">
    <div class="image1">
        <img src="bowl.jpg">
    </div>
    <div class="image2">
        <img src="octupus.jpg">
    </div>
    </div>
</a>

Answer 1

也许这个解决方案可以帮助您:

Note: When you create animations using CSS, avoid using the "display" property to hide the elements.

---

<a href="series-1.html" class="s1">
  <p>Series 1</p>
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
</a>

<a href="series-2.html" class="s1">
  <p>Series 2</p>
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
</a>

---

img {
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 10%;
  margin:2px;
}

a.s1 {
  height: 10px; 
  display:block;
}

a.s1:hover {
  height: auto; 
}
a.s1:hover img {
  opacity: 1; 
}

---

演示: https://codepen.io/anon/pen/LvMxWm