2

我正在尝试使用 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);
});

我应该使用什么选择器？

4

4 回答 4

5

为什么哦，为什么你使用 jQuery 来完成这个任务？

原始的 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;
}
于 2013-01-10T01:59:06.033 回答
3 
$('#footer ul li a').hover(...

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

于 2013-01-10T01:56:11.223 回答
2

我认为你应该使用：

$('#footer ul li a');

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

在包装中调整颜色<li>不会覆盖<a>标签默认的颜色

编辑：

至于您想要实现的目标的答案，您将在尝试仅使用 JQuery 覆盖 CSS :hover 时遇到问题。但是 JQuery UI在他们的 animate() http://jqueryui.com/animate/中使用了http://api.jquery.com/jQuery.cssHooks/

使用它，在 .hover() 或 .mouseover() 上使用动画将覆盖默认的 CSS :hover 属性以使用 JQuery 的动画。

示例：http: //jsbin.com/udahe3/399/

在其他地方回答 SO：Override a:hover with jQuery?

于 2013-01-10T01:55:59.937 回答
1

您可以改为定位A元素：

$('#footer ul a')
于 2013-01-10T01:58:04.143 回答