Question

我正在制作一组照片/文字。所有面板上都有一个覆盖颜色，除了第一个在页面加载时具有活动类的面板，它会移除覆盖层。当您将鼠标悬停在第二个/第三个等面板上时，叠加活动类将从第一个面板中移除并转到悬停的面板上。

现在它只在页面加载时处于活动状态，我似乎无法将该类从第一个div移开并在悬停时进入第二个div。

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

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

       }

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

Answer 1

没有必要为此使用JavaScript或jQuery。它最适合在CSS中使用:hover伪选择器。今天也容易得多。

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

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

如果你坚持使用jQuery，你可以尝试这个

＆＃13;

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

＆＃13;

.active {
  background: gold;
}

＆＃13;

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

＆＃13;

这种方法非常不受欢迎

Answer 2

在jQuery中，你可以这样做：

$(document).ready(function() {

  // Make the first active
  $(".overlay:first").addClass("active");

  // On hover remove all active classes from .overlay
  // and add .active only to the one that is hovered
  $(".overlay").hover(function() {
    $(".overlay").removeClass("active");
    $(this).addClass("active");
  });

});

但理查德汉密尔顿的答案要好得多，也更清洁。

Answer 3

您可以使用jQuery＆＃39; on。例如：

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

在悬停时删除和添加类

3 个答案: