我有一个“系列”列表,当用户将鼠标悬停在列表中的系列名称上时,我想要一个连接到所述系列的图像弹出。我也希望它弹出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い