【问题标题】：Jquery and the :active selectorJquery 和 :active 选择器
【发布时间】：2013-02-08 00:30:02
【问题描述】：

这是我的代码：

$('#ss a:active').parent().addClass('ss-active');

我想你可以从我的代码中看出我想要做什么，但它不起作用，我该怎么做？而且我还希望当用户从按钮上移开鼠标恢复正常状态时，我的意思是：“用户从按钮上移开鼠标”是用户只能按住按钮一段时间，然后它应该看到:active 语句。

我无法使用 css 执行此操作，因为我需要 <a> 的父级。

//就是这样，我是怎么做到的！

    $('#solicita a').mousedown(function() {
    if($(this).parent().hasClass('solicita-hover'))
    {
        $(this).parent().removeClass('solicita-hover');
        $(this).parent().addClass('solicita-active');
    }
}).mouseleave(function() {
    $(this).parent().removeClass('solicita-active');
});

【问题讨论】：

您应该将 twerq 的解决方案标记为您问题的答案

标签： jquery html css css-selectors

【解决方案1】：

尝试使用 mousedown() 事件：

$('#ss a').mousedown(function() {
 $(this).parent().addClass('ss-active');
}).mouseup(function() {
 $(this).parent().removeClass('ss-active');
});

【讨论】：

【解决方案2】：

为刚接触 jQuery 的人详细解答

您应该对 Javascript 中发生的事情的顺序有所了解。当浏览器看到您编写的脚本时，它会从上到下一次解析一行（大部分情况下）。

因此，当它在 jQuery 中读取您的 CSS (Sizzle) 选择器时，它将查看文档在其当前状态中找到您指定的选择器。这意味着，如果您编写 $('#my-id div').addClass( 'some-class' )，它将在 id 为 my-id 的元素中查找 div，在该特定时刻并向它们添加类。

如果您向#my-id 添加更多 div，它们将不会收到任何额外的类，因为当浏览器最初读取该行 Javascript 时它们并不存在。

所以在最初的问题中，当提问者写 $('#ss a:active').parent().addClass('ss-active'); 时，浏览器只会在它读取该行的毫秒内寻找 #ss a:active。

因此，我们必须绑定 Javascript 事件以检测未来可能发生的事情

这就是我们最终不得不做$('#ss a').mousedown( function ).mouseup( function ) 之类的事情的原因。因为这告诉 jQuery 和浏览器您正在等待（或 listening）事件发生。

【讨论】：

【解决方案3】：

在 jQuery 中，“:”是他们所谓的元字符。 ":" 后面的通常是 jQuery 选择器语法，例如 ":file" 或 ":has()"。

":active" 是一个 CSS 伪类，因此使用 ":" 表示伪类与 jQuery 选择器语法要求相冲突。

说了这么多，您可以尝试按照 jQuery api 中的建议使用两个反斜杠转义“:”。但是，我还没有尝试过。

【讨论】：

【解决方案4】：

您实际上可以在体面的浏览器（Firefox、Chrome、IE10+）中侦听选择器规则匹配，方法是设置一个虚拟 CSS 关键帧并侦听动画启动事件，当它与您正在侦听的选择器匹配时冒泡。这是一篇深入探讨它的博文，并提供了一个微小的文档/元素扩展，addSelectorListener，使其更易于使用：http://www.backalleycoder.com/2012/08/06/css-selector-listeners/

【讨论】：