悬停时删除和添加类

Question

I am making a panel of photos/text. All the panels will have an overlay color on them except the first one which has an active class on page load which removes the overlay. As you hover over the second/third etc panels, the overlay active class will remove from first panel and go onto the one that is hovered.

Right now it is only active on page load, I can't seem to get the class off the first div and onto the second div on hover.

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

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

       }    

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

Answer 1

There is no need to use JavaScript or jQuery for this. It's best used in CSS with the :hover pseudo-selector. It's also much easier today.

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

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

If you insist on using jQuery, you can try this

 $(".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> 

This approach is highly frowned upon though

Answer 2

In jQuery, you could do it like this:

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

});

but Richard Hamilton's answer is much better and cleaner.

Answer 3

You can use jQuery's on . For example:

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