JQuery .css 里 :hover > 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');
})