Question

我将以下css应用于相应的html代码段。我想设置它，以便它在鼠标悬停时改变颜色。我不知道这是怎么做的正确的...有人可以赐教我吗？谢谢！

CSS：

$('#vertical_menu li').each(function(){

    $(this).mouseout(function(){
        $(this).css('color','#1c479e');
    });
});

$('#vertical_menu li').each(function(){

    $(this).mouseout(function(){
        $(this).css('color','#c42026');
    });
});

HTML：

<ul id="vertical_menu">
    <li id="ccfl">Fort Lauderdale</li>
    <li id="ccbr">Boca Raton</li>
    <li id="ccbw">Boca (Sandalfoot)</li>
    <li id="ccbb">Boynton Beach</li>
    <li id="ccke">FL Keys</li>
    <li id="cchw">Hollywood</li>
    <li id="ccpl">Plantation</li>
    <li id="ccwb">Webcast</li>
</ul>

OR .....我删除简单的achor标签是不正确的？我还需要在单击项目时添加活动状态，我想因为我将通过jQuery执行此操作，所以我可以以相同的方式设置翻转...

我接近这一切都错了吗？

感谢您的时间。

肯尼

Answer 1

这可以使用纯CSS完成，不需要JavaScript或jQuery：

#vertical_menu li:hover
{
    color: red;
}

这是a working fiddle。

Answer 2

不需要.each()，也不需要单独的mouseout功能。

使用.hover一次注册：

$('#vertical_menu li').hover(
    function() { // called on mouse enter
        $(this).css('color', '#1c479e');
    },
    function() { // called on mouse leave
        $(this).css('color', '#c42026');
    }
);

另请注意，mouseout实际上效果不佳 - hover使用伪事件mouseenter和mouseleave模拟某些MSIE功能。

如果您想要仅在单击某个项目时更改颜色（并且其他项目还原为其默认颜色），您可以尝试这样做：

$('#vertical_menu li').click(
    function() {
        $(this)
           .css('color', '#1c479e')   // set my colour
           .siblings()                // and for my siblings
           .css('color', '#c42026');  // reset their colour
    }
);

演示http://jsfiddle.net/alnitak/fXfFN/

需要一些jQuery鼠标悬停辅助

2 个答案: