CODEWITHSUNDEEP
jquerycsshoverhtml-lists
nullified
nullified

Reputation: 95

JQuery .css li:hover > a

I'm a newbie when it comes to JQuery. I'm trying to basically allow visitors to choose between two color themes on my site. When they click the link for the light theme, everything changes color as it's supposed to except for various elements in my navigation menu. Here is the JQuery:

function SolarColors (){
    $('html').css('background-color', '#839496');
    $('body').css('background-color', '#839496');
    $('#main-container').css('background-color', '#FDF6E3').css('color', '#586E75');
    $('#title-bar').css('background-color', '#073642').css('color', '#268BD2');
    $('#content').css('background-color', '#FDF6E3');
    $('#color-bar').css('background-color', '#FDF6E3');
    $('h2').css('color', '#DC322F');
    $('.drop_menu').css('background-color', '#93A1A1');
    $('.drop_menu li a').css('color', '#ffffff');
    $('.drop_menu > li:hover > a').css('color','#00ff00');
}

Everything changes color except for the last item in that list:

    $('.drop_menu > li:hover > a').css('color','#00ff00');

does not work.

Here is what I have in my HTML:

<script>
$(document).ready(function(){
    $("a.color[name='solar']").click(function(){
        SolarColors();
    });
    $("a.color[name='zen']").click(function(){
        ZenColors();
    });
});
</script>

Upvotes: 0

Views: 1485

Answers (3)

misdreavus79
misdreavus79

Reputation: 126

It's not working because :hover is a css pseudo selector. It's not really a DOM element. You have to use the .hover() handler, like so:

$('.drop_menu > li > a').hover(function(){
    $(this).css('color', '#00ff00')
});

Or, as somebody else suggested, simply change a class on the body element with all of your styles. Much easier that way.

Upvotes: 0

John Smith
John Smith

Reputation: 478

If all else fails

$('.drop_menu > li').hover( hoverOn, hoverOff );

function hoverOn() { $('.drop_menu > li> a').css('color','#00ff00'); }
function hoverOff() { $('.drop_menu > li> a').css('color','ffffff'); }

Upvotes: 0

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2196

You should probably rewrite it like this 

$('.drop_menu li a').hover( function(e){
     $(this).css('color', 'yourcolor');
})

Upvotes: 1

Related Questions