Jquery和:active选择器

Question

这是我的代码：

$('#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');
});

- Uffo

---

你应该把twerq的解决方案标记为你问题的答案。 - xyhhx

Answer 1

尝试使用mousedown()事件：

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

- twerq

Answer 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和浏览器你正在等待（或监听）事件发生。

- xyhhx

Answer 3

在jQuery中，":"是所谓的元字符。紧随其后的通常是jQuery选择器语法，例如":file"或":has()"。

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

话虽如此，您可以尝试使用两个反斜杠转义":"，如jQuery api中建议的那样。但我没有尝试过。

- jody tate

Answer 4

在较新的浏览器（Firefox，Chrome，IE10+）中，您实际上可以通过设置虚拟CSS关键帧并侦听匹配所需选择器的animationstart事件来监听选择器规则匹配。以下是一篇深入探讨此方法并提供一个小型文档/元素扩展addSelectorListener以使其更易于使用的博客文章：http://www.backalleycoder.com/2012/08/06/css-selector-listeners/

- csuwldcat