javascript-hovering one element会改变其他元素

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, +，您可以在将鼠标悬停在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;
}

这是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 */
}