Add Class on ready, remove class on mouseenter

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

Everything works fines, except the mouse enter. I'm using CSS gram filters so the classes are defined — Kamalakannan, Jan 13 '17 at 05:56
@Kamalakannan, you have included undefined elements in you pen. remove it and you're good to go — claudios, Jan 13 '17 at 06:01
@claudios there's nothing undefined. Can you tell me where is it. — Kamalakannan, Jan 13 '17 at 14:45

score 3 · Accepted Answer · answered Jan 13 '17 at 05:56

3

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

answered Jan 13 '17 at 05:56

muneebShabbir

2,500
4
29
46

The plugin is included from the links – Kamalakannan Jan 13 '17 at 14:41

score 0 · Answer 2 · answered Jan 13 '17 at 05:49

0

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

answered Jan 13 '17 at 05:49

Alive ColdJuan

50
7

The problem is in jQuery script. – claudios Jan 13 '17 at 05:54
i know what he want .... , he want that class inkwell should be replaced with class mayfair when someone hovers on that div , and css hover propert is easiest solution for this – Alive ColdJuan Jan 13 '17 at 05:57

score -4 · Answer 3 · answered Jan 13 '17 at 06:00

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.

As this code is in Codepen we dont have to include document ready, it takes it automatically. And $lg is a plugin which is called that, the plugin has a link in js — Kamalakannan, Jan 13 '17 at 14:44

Add Class on ready, remove class on mouseenter

3 Answers3

Linked