CODEWITHSUNDEEP
jquerymouseovermouseenter
DDfrontenderLover
DDfrontenderLover

Reputation: 480

Jquery mouseenter state show active state and disable no active

Pretty strait forward:

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');

});

Upvotes: 0

Views: 301

Answers (3)

flowstoneknight
flowstoneknight

Reputation: 1236

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.

Upvotes: 2

user936891
user936891

Reputation:

Pretty easy a bit tricky I know, but with some css and a bit of js:

.hovered .arrow{display:none;}
.hovered.hover .arrow{display:block;}

js:

$('ul > li').hover(function(){
    $('a').addClass('hovered');
}, function(){
    $('a').removeClass('hovered');
});


$('.subtext').hover(function(){
    $(this).addClass('hover');
}, function(){
    $(this).removeClass('hover');
})

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

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50767

Everything is functioning as intended but your psuedo selector is selecting the base element as opposed to the hovered element, adjust the CSS as follows:

.subtext.hover:after{
    content:">";
    position:absolute;
}

Here's a jsFiddle

Upvotes: -1

Related Questions