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

Posted 2021-04-14

我有一个“系列”列表，当用户将鼠标悬停在列表中的系列名称上时，我想要一个连接到所述系列的图像弹出。我也希望它弹出transition的.5s。

我已经遇到了一个问题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>

答案

也许这个解决方案可以帮助你：

注意：使用CSS创建动画时，请避免使用“display”属性来隐藏元素。

---

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

---

但是：ぁzxswい