CSS 光标指针在项目列表拖动时覆盖内联样式光标

Question

我正在使用Nestable JS库，我的树中有一个可嵌套项目的列表，我想在将鼠标悬停在它们上时添加一个cursor: pointer，并且在拖动时cursor: move添加。但我无法让它工作。

我发现在jQuery UI中也会发生同样的事情，所以在这里我做了一些小提琴来展示：

$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        cursor: 'move',
        start: function(event) {
        	event.target.style.cursor = 'move';
        },
        stop: function(event) {
        	event.target.style.cursor = 'default';
        }
    });
    $(".draggable").draggable({
        connectToSortable: '.sortableList',
        cursor: 'move',
        helper: 'clone',
        revert: 'invalid'
    });
});

div {
    border:1px solid red;
}
ul .ui-state-default li:hover {
   cursor: pointer;
}
li:hover {
  //cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div>Draggable source items
    <ul>
        <li class="draggable" class="ui-state-highlight">Drag me down</li>
    </ul>
</div>
<div>Sortable List 1
    <ul class="sortableList">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>

现在，如果您检查 CSS 部分，我已注释掉最后一个规则，因为如果光标是指向 ：hover 的指针，则它不起作用。发生与Nestable JS相同的事情。

有没有办法避免这种覆盖？要让两个光标都指向并根据情况移动？

谢谢。

Answer 1

而不是在:hover本身上设置光标样式，而是将其设置为普通类选择器。

.ul .ui-state-default li {
    cursor: pointer;
}

当鼠标指针移到元素上时，这应该将光标设置为指针。如果它不是这样工作的，请检查您使用的框架是否具有更大的级联级别(例如 .first-class .second-class .thirdclass {...} .你必须获得一个更大的"级联级别"，比如这个语句，才能覆盖它。

或者干脆用!important(不要经常用这个，因为每次覆盖这个样式都会变得很困难(