CSS id 选择器不工作答案

【问题标题】：CSS id selector not workingCSS id 选择器不工作
【发布时间】：2013-01-10 01:52:45
【问题描述】：

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

我应该使用什么选择器？

【问题讨论】：

对我来说看起来有效，也许你需要把所有东西都包装在document.ready
-1 定义“不工作”并在标题中总结；例如$(the_selector) 是否返回一组 0 元素或 ..？
用 document.ready 和 $('#footer ul li a') 包裹以使选择器工作，但您仍然不能为颜色设置动画。证明它有效：jsfiddle.net/Mhp2c/10 要为颜色设置动画，请查看motyar.blogspot.se/2010/07/animate-color-using-jquery.html
你的问题有答案here

标签： jquery css css-selectors

【解决方案1】：

你为什么要使用 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;
}

【讨论】：

诚然，IE 9 及以下版本只会看到突然的颜色变化，但如此细微的审美差异不能成为使用 jQuery 处理最普通任务的借口；)
0.2s 过渡在 IE6 中不起作用，不是 GUD ENUFF。 =]
用一种不那么讽刺的语气，我同意迎合旧浏览器的这种微小的渐进增强对开发人员来说是浪费时间（对最终用户来说会损失几微秒的性能？）。
我最初使用过渡，但 IE9 不兼容让我非常困扰。 :P
然后升级到IE10。它适用于 Windows 7，并且运行良好。

【解决方案2】：

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

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

【讨论】：

是的，我知道。尝试在我的 CSS 中将颜色更改为该选择器下的颜色，但它没有使 jQuery 代码工作。
如果您使用 jQuery 解决方案，使用 .hover() 方法会更有效；)
你说得对，我只是在更改选择器，但我也应该添加它。帖子已编辑。

【解决方案3】：

我认为你应该使用：

$('#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?

【讨论】：

试过了，没用。在我的 CSS 中，我也在 ul li a 上使用了颜色。

【解决方案4】：

您可以改为定位 A 元素：

$('#footer ul a')

【讨论】：