Search code examples
jquerymouseovermouseenter

Jquery mouseenter state show active state and disable no active

Pretty strait forward:

  • By default will always have 2 arrows displayed but on hover only the active one will have the arrow. On mouse leave the arrows will be displayed again.

Please have a look the demo, right now, the menu is always active

Demo: http://jsfiddle.net/33qeqap3/1/

$('.subtext').mouseenter(function () {

    $(this).addClass('hover');

    if ($(this).hasClass('hover')) {
        $(this).addClass('yes');
    }

});

$('.subtext').mouseleave(function () {
    $(this).removeClass('hover');
    $(this).removeClass('yes');

});
Solution

  • You can use $('a:not(:hover)') to select the one that the cursor is not hovering over.

    JS (jQuery):

    $('a').on('mouseover', function() {
    $('a:not(:hover)').removeClass('arrows');
}).on('mouseout', function() {
    $('a:not(:hover)').addClass('arrows');
});

    Here's a fiddle.