JQuery .css li:悬浮>a

Question

说到JQuery，我是个新手。我试图基本上允许访问者在我的网站上选择两种颜色主题。当他们点击灯光主题的链接时，除了我的导航菜单中的各种元素外，所有的东西都会改变颜色。下面是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');
}

除了该列表中的最后一项外，所有内容都会更改颜色：

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

不管用。

下面是我的HTML中的内容：

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

Answer 1

你应该像这样重写它

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

Answer 2

如果其他一切都失败了

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

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

Answer 3

它不能工作，因为:悬停是一个css伪选择器。它实际上不是DOM元素。必须使用.hover()处理程序，如下所示：

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

或者，就像其他人建议的那样，只需用所有的样式更改body元素上的一个类。那样容易多了。