javascript-悬停一个元素会改变另一个元素

Question

我希望悬停一个元素会影响另一个元素。在这里，我想在悬停某些 div 部分时在其他 div 中的图像中创建动画。为此，我使用了这段代码:

HTML:

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

JavaScript:

$(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;    
         });
       });

但它不起作用。请提供建议。

Answer 1

根据您提供的标记，您不需要为此需要 jQuery。

只需使用选择器 .s:hover + section .hs-wrapper img。使用 adjacent sibling combinator, + ，您可以在将鼠标悬停在 .s 上时选择后续的 section 元素。从那里，子 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;
}

这是一个basic example :

section .hs-wrapper img {
    opacity:0;
    transition: 3s ease-out; /* Mouseleave */
}
.s:hover + section .hs-wrapper img {
    opacity:1;
    transition: .5s ease; /* Mouseenter */
}