Question

我正在尝试使用jQuery进行一些悬停操作，但我认为选择器无效。这是HTML：

<div id="footer">
            <ul>
                <li><a href="#">Start a Something</a></li>
                <li><a href="#">Send a Gift</a></li>
                <li><a href="#">How It Works</a></li>
                <li><a href="#">Secure Service</a></li>
                <li><a href="#">About Company</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <ul>
                <li>&copy; 2012 Company</li>
                <li><a href="#">Terms of Use and Privacy</a></li>
            </ul>
        </div>

这是jQuery：

$('#footer ul li').mouseover(function(){
        $(this).animate({
            color: "white"
        }, 200);
    }).mouseout(function(){
        $(this).animate({
            color: "#bcbdbd"
        }, 200);
});

我应该使用什么选择器？

Answer 1

为什么你为什么要使用jQuery来完成这项任务？

RAW CSS！

#footer ul li a { /* or even just "#footer a" */
    color: #bcbdbd;
    transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    /* Chrome does not yet support the un-prefixed version */
}
#footer ul li a:hover { /* same comment as above */
    color: #fff;
}

Answer 2

$('#footer ul li a').hover(...

它们是链接，因此<li>上的颜色不会改变它们。

Answer 3

我认为你应该使用：

$('#footer ul li a');

您的选择器没错，但您应该将这些动作处理程序和动画应用到<a>标签中。

调整包裹<li>中的颜色不会覆盖<a>标记默认的颜色

修改

至于你想要实现的目标的答案，你将在尝试覆盖CSS时遇到问题：单独使用JQuery进行悬停。但是JQuery UI在他们的animate（）http://api.jquery.com/jQuery.cssHooks/
中使用了http://jqueryui.com/animate/
使用它，在.hover（）或.mouseover（）上使用animate将覆盖默认的CSS：hover属性以使用JQuery的动画。

实施例： http://jsbin.com/udahe3/399/

回答SO：Override a:hover with jQuery?

Answer 4

您可以改为定位 A 元素：

$('#footer ul a')

CSS id选择器不起作用

4 个答案: