我正在制作一组照片/文字。除了第一个面板在页面加载时具有活动类之外,所有面板上都将具有叠加层颜色,该颜色会删除该叠加层。当您将鼠标悬停在第二个/第三个etc面板上时,overlay active类将从第一个面板上删除,然后转到已悬停的那个类上。

现在,它仅在页面加载时才有效,我似乎无法将类从第一个div移到第二个div上。

if ( $(".overlay:first") ){
     $(".overlay:first").addClass("active");
     }

else {
    if ( $(".overlay:not(:first)").hover ){
           $(".overlay:first").removeClass("active");
          }

       }


https://jsfiddle.net/egdkuh16/3/

最佳答案

无需为此使用JavaScript或jQuery。最好在CSS中使用:hover伪选择器。今天也要容易得多。

.overlay:first-child {
   background: white;
}

.overlay:first-child:hover {
  background: gold;
}


如果您坚持使用jQuery,可以尝试一下



$(".overlay:first").on("mouseover", function() {
    $(this).addClass("active");
}).on("mouseout", function() {
    $(this).removeClass("active");
});

.active {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>





这种方法虽然不被接受

关于javascript - 悬停时删除和添加类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35734972/

10-14 22:54
查看更多