即使使用 !important，指针光标也会覆盖等待光标答案

【问题标题】：Pointer cursor overrides wait cursor even with !important即使使用 !important，指针光标也会覆盖等待光标
【发布时间】：2014-07-22 15:41:41
【问题描述】：

我有可点击的元素，我将指针光标指向一个类。有人将鼠标悬停在上面，他们将指针光标视为可点击的视觉提示。他们单击哪个执行 Ajax 调用。由于 Ajax 调用的长度不确定，因此我尝试对其进行设置，以便光标在 Ajax 启动时变为“等待”光标，然后在 Ajax 停止时恢复。

然而……似乎尽管在“wait”类上有一个“！important”声明，指针仍然具有优先权。最终结果是，当有人点击该项目时，他们不太可能离开它。他们只会将鼠标保持在原处并等待。所以光标不会更新。

我已经创建了一些直接的 CSS 来表明当你移动到一个带有指针的元素时，即使它不是“重要”声明，指针也是优先的。在 Windows 版 Chrome 和 Firefox 中测试：

这是小提琴：http://jsfiddle.net/3NdYP/

以及其中包含的相关代码（CSS截断）：

HTML：

<div id="fakeBody" class="wait">
    <table>
        <tr class="pointer">
            <td>Yup, a pointer row normally...</td>
        </tr>
    </table>            
</div>

CSS：

.pointer {
    cursor: pointer;
}

.wait {
    cursor: wait !important;
}

“fakeBody”只是为了小提琴。在现实世界的场景中，它就是 body 元素本身。

【问题讨论】：

这就是它通常的工作方式。 .pointer 更特定于元素。您可以改为将其设为 .wait, .wait *，这将使其适用于 .wait 的所有子元素，即使父 div 具有 class='wait'。
您可能会从这个Stackoverflow question 的答案中受益。

标签： css

【解决方案1】：

因为.pointer 嵌套在.wait 中，所以它的游标声明优先。任何其他 CSS 声明都会发生同样的事情：例如，background-color。如果你明确告诉孩子有一个不同的规则，这将覆盖任何继承的样式，即使是用!important 定义的。

【讨论】：

谢谢，本。超级有用，至少知道我做错了什么。
这是有道理的。我只是想知道为什么当我指定body { font-size: '15px' !important } 时，我的用户代理样式表一直在表格上将其更改为 16px。你的帖子解释了原因。通过将选择器更改为 body, body table 很容易修复，但随着我的应用程序的增长，记住这一点也很好。

【解决方案2】：

试试这个

   $(document).ajaxStart(function(){
    $('.pointer').addClass("wait");
}).ajaxComplete(function(){
    $('.pointer').removeClass("wait");
});

【讨论】：

成功了。我在 body 和 .pointer 中都添加了等待，它现在按预期工作。只要计时器允许我就接受。 ;)
如果对你有帮助的话很好;)

【解决方案3】：

如果您想确定光标是否已设置，您可以使用：

.wait, .wait * {
  cursor: wait;
}

选择器的特殊性应高于.pointer，因此不需要!important。

通用选择器在这里不应产生任何性能影响（请参阅https://stackoverflow.com/a/13432169/3778409）。

【讨论】：