JQuery .css li:hover > a答案

【问题标题】：JQuery .css li:hover > aJQuery .css li:hover > a
【发布时间】：2014-04-14 01:54:10
【问题描述】：

我是 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>

【问题讨论】：

你能显示你的 html (.drop_menu) 吗？我认为你应该这样做 $('.drop_menu li:hover a').css('color','#00ff00');
'.drop_menu' 是什么元素？为了让你的 js 工作，它必须是 <ul> 或 <ol> 元素。发布该元素的 HTML 以获得更多帮助。
你能分享你的 drop_menu 的 html 吗？也许做一个小提琴？更一般地说，我建议在 javascript 中的 body 元素上设置/更改一个类，并在 CSS 中包含所有 CSS（对于两个主题，但在正确类的上下文中）

标签： jquery css hover html-lists

【解决方案1】：

你应该像这样重写它

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

【讨论】：

【解决方案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'); }

【讨论】：

【解决方案3】：

它不起作用，因为 :hover 是一个 CSS 伪选择器。它不是真正的 DOM 元素。您必须使用 .hover() 处理程序，如下所示：

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

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

【讨论】：