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

它无效，因为：hover是一个css伪选择器。它不是一个真正的DOM元素。您必须使用.hover（）处理程序，如下所示：

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

或者，正如其他人建议的那样，只需使用所有样式更改body元素上的类。这样容易多了。

JQuery .css li：hover＆gt;一个

3 个答案: