Add Class on ready, remove class on hover

Question

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.

$(document).ready(function() {
$("#gallery li a").load(function(){
    $($(this).find("img")[0]).addClass("inkwell");
});
$("#gallery li a").hover(function(){
    $($(this).find("img")[0]).removeClass("inkwell").addClass("mayfair");
}); });

the jQuery code above didn't seem to work well.

Please help, Thanks.

adeneo · Accepted Answer · 2016-10-09T11:57:30.020

1

An anchor doesn't load, it's just there from the start and has no external resource to load, so there's no onload handler

$(document).ready(function() {
    $("#gallery li a img").addClass("inkwell");

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

CodePen

edited Oct 09 '16 at 11:57

answered Oct 09 '16 at 11:44

adeneo

312,895
29
395
388

Doesn't work well, look at my codepen http://codepen.io/kannan3024/pen/VKXpkO?editors=1010 – Kamalakannan Oct 09 '16 at 11:50
Seems to work just fine *(note that I changed it to `first-child`)*, the classes are added and removed just as expected ? – adeneo Oct 09 '16 at 11:53
I don't see any change. the 1st time the effect was there. but then the class is mayfair and doesn't change on hover – Kamalakannan Oct 09 '16 at 11:56
I think I get what you're trying to do, you want to swap the classes again on mouse out, and you should be using the mouse events, not `hover`, I'll edit and post an example – adeneo Oct 09 '16 at 11:57
Here's another option -> http://codepen.io/adeneo/pen/NRYpqd?editors=1010 – adeneo Oct 09 '16 at 11:58
Thank you. Adeneno – Kamalakannan Oct 09 '16 at 12:17
Hi Adeneno, Can you answer this [Stackoverflow] (http://stackoverflow.com/questions/41628048/add-class-on-ready-remove-class-on-mouseenter) – Kamalakannan Jan 13 '17 at 14:47

Add Class on ready, remove class on hover

1 Answers1

Linked