Question

我有可点击的元素，我将指针光标赋给了一个类。有人盘旋，他们将指针光标视为可点击的视觉提示。他们点击执行Ajax调用。由于Ajax调用是一个不确定的长度，我试图将其设置为使得游标在Ajax启动时成为“等待”游标，然后在Ajax停止时恢复。

但是......似乎尽管“等待”类上有“！important”声明，但指针仍具有优先权。最终结果是，当有人点击该项目时，他们不太可能远离它。他们只是将鼠标放在原处并等待。因此光标不会更新。

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

其中包含的相关代码（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;
}

“假身体”只适合小提琴。在现实世界的场景中，它是身体元素本身。

Answer 1

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

Answer 2

试试这个

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

Answer 3

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

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

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

此处，通用选择器不应对性能产生任何影响（请参见https://stackoverflow.com/a/13432169/3778409）。

即使使用！important，指针游标也会覆盖等待光标

3 个答案: