CODEWITHSUNDEEP
jquery
user520300
user520300

Reputation: 1527

modifying css with jquery

I have a ul list and below im using jquery to find out if the user is hovering sub menus under about us and if yes set some css on hover. This does change the background color to green but when i hover off the green doesnt go away?

JQUERY

$('ul > li > ul > li a').hover(
    function(){
        var whatami = $(this).parents('li').eq(1).find('a[title]:first').attr('title');
        console.log(whatami);
        if (whatami == 'About Us') {
            //alert(whatami);
            $('.white ul.mega-menu li .sub-container.non-mega li a:hover').css({"background-color":"green"});

        }
    },
    function(){
    });

Upvotes: 0

Views: 105

Answers (3)

Rusty Jeans
Rusty Jeans

Reputation: 1426

in jQuery the :hover is just an element selector, it's not the same as CSS a:hover. Trying something like:

$('.white ul.mega-menu li .sub-container.non-mega li a').hover(
    function () {
        $(this).css({"background-color":"green"});
    },
    function () {
        $(this).css({"background-color":"none"});
    }
); ​

Upvotes: 2

jamb
jamb

Reputation: 196

.white ul.mega-menu li .sub-container.non-mega li a is what you should be using as a your selector, your current selector ul > li > ul > li a is more generalized.

Try to use either $(this) for setting the green

Upvotes: 0

James Montagne
James Montagne

Reputation: 78730

The way hover works is that the first function is executed when the mouse enters and the 2nd is executed when the mouse leaves. You have nothing in the 2nd function, so that means nothing will happen when the mouse leaves. You need to do whatever you want to do in the 2nd function:

$('ul > li > ul > li a').hover(
function(){
    // make it green
},
function(){
    // CHANGE IT BACK HERE
});

Upvotes: 3

Related Questions