Add Class on ready, remove class on mouseenter

问题

I'm creating my portfolio website. I'm looking to add class on document ready, and remove/change that class to a different class on hover. I'm using lightgallery & CSS gram filters to my images on load and hover. Previously, I added a list. Unfortunately it did not work well for my needs. Previous code

$("#gallery a").on({
  mouseenter : function() {
    $(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("mayfair");
  },
  mouseleave : function() {
    $(this).find(".nak-gallery-poster").removeClass("mayfair").addClass("inkwell");
  }
});

I altered the jQuery to match the content from the previous code. This did not work. Please Help. My CodePen

回答1:

remove code

$lg.lightGallery();
  $lg.append(slide);
  $lg.data('lightGallery').destroy(true);
  $lg.lightGallery();

from your codepen, then all works fine

seems like you missed some plugin or placed wrong code

回答2:

instead of using two class edit your css like this

.inkwell{
color: red;
}
.inkwell:Hover{
color: blue
}

This is easier and less messy than jquery and you can add background color and all whatever you want according to your needs

回答3:

Hi I went through your code in codepen and found out that you haven't included the mouseenter and other methods methods inside document.ready(function(){ ... }. I wanted to post this as comment but they won't let me do it as i have less than 50 rep points.

Please add those codes inside document.ready and they would work fine. Events don't get registered as the script is getting executed before DOM loads.

And yes $lg is undefined also but others mentioned it so i left it. adding now.

来源：https://stackoverflow.com/questions/41628048/add-class-on-ready-remove-class-on-mouseenter

标签

jquery

html

css

onmouseover

lightgallery