Question

我有以下代码，在触发器页面上为dragging-something元素设置html类。该课程执行以下操作：

html.dragging-something {
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

这一切都有效，直到我将鼠标移动到另一个更改光标的元素上。（像输入字段一样）

如何制作，以便我的dragging-something类不会被可能改变光标的任何其他内容覆盖？

jsFiddle（问题）：https://jsfiddle.net/BoxMan0617/jndukr86/

jsFiddle（解决方案）：https://jsfiddle.net/BoxMan0617/jxesdzqf/（感谢@ humble.rumble）

[解决]

Answer 1

您需要将其应用于HTML标记中包含的元素，而不仅仅是HTML标记

html.dragging-something * {
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

Answer 2

我个人尽量避免尽可能多地使用!important。相反，我给出了规则的结构和特异性：http://jsfiddle.net/vy599pa2/

<div class="move">
    <div class="pointer">
    </div>
</div>
<div class="pointer">

div {
    width: 150px;
    height: 150px;
    padding: 30px;
    background-color: grey;
    border: 2px solid black;
}

div div {
    padding: 0;
    background-color: lightblue;
}

div + div {
    margin-top: 10px;
}

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

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

带有！important的CSS游标被默认值

2 个答案: