Jquery hover exit function not working

Question

$("#ss3a").hover(function(){
      $(".linksa").toggleClass("linksa",false);
    },function(){
      $(".linksa").toggleClass("linksa",true);
});

linksa has a "visibilty:hidden" css roperty.

The first part works however the div dosen't become invisible again when I move the mouse out of the div.

I tried the same with mouseenter and mouseleave but it's still not working.

have a look on second demo http://stackoverflow.com/a/16821586/2341815 — Ruwanka De Silva, Jan 04 '16 at 13:01

score 3 · Accepted Answer · answered Jan 04 '16 at 12:55

3

You can use something like this:

$("#ss3a").hover(function(){
      $(".linksa").fadeOut(); //or hide, slideUp etc...
    },function(){
      $(".linksa").fadeIn(); //or show, slideDown etc...
});

answered Jan 04 '16 at 12:55

GeorgeGeorgitsis

1,262
13
29

score 1 · Answer 2 · answered Jan 04 '16 at 12:56

The reason this doesn't work is because you at first toggle '.linksa' as false, technically removing the class. When your mouse leaves, you use '.linksa' as your selector, which is unfindable because you removed it.

Instead, do it like this.

$(document).on({
    mouseenter: function () {
        $("#ss3a").removeClass("linksa");
    },

    mouseleave: function () {
        $("#ss3a").addClass("linksa");
    }
}, '#ss3a');

Jquery hover exit function not working

2 Answers2