我希望悬停的一个元素会影响其他元素。在此我想悬停一些div
部分在其他div
的图像中创建动画。为此我使用了这段代码:
<div class="s">hover here</div>
<section>
<div class="hs-wrapper">
<img src="images/1.gif" alt="image01"/>
<img src="images/2.gif" alt="image02"/>
</div>
</section>
$(document).ready(function () {
$(".s").mouseenter(function () {
$(".hs-wrapper img").css({
-webkit-animation-play-state:running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
});
$(".s").mouseleave(function () {
$(".hs-wrapper img").css({
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
});
});
但它不起作用。请提供建议。
答案 0 :(得分:1)
根据您提供的标记,您不需要jQuery。
只需使用选择器.s:hover + section .hs-wrapper img
即可。使用adjacent sibling combinator, +
,您可以在将鼠标悬停在section
上时选择后续的.s
元素。从那里,选择了子img
元素。
section .hs-wrapper img {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
}
.s:hover + section .hs-wrapper img {
-webkit-animation-play-state:running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
section .hs-wrapper img {
opacity:0;
transition: 3s ease-out; /* Mouseleave */
}
.s:hover + section .hs-wrapper img {
opacity:1;
transition: .5s ease; /* Mouseenter */
}