Question

我正在使用Nestable JS库，我的树中有一个可嵌套项目列表，我想在我将鼠标悬停在cursor: pointer上时添加cursor: move，$(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' }); });拖动的时候。但我不能让它发挥作用。

我发现在jQuery UI中发生了同样的事情，所以在这里我有一点小提示来表明：

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>

Series

现在，如果您检查CSS部分，我将最后一条规则注释掉，因为如果光标是指针，则它不起作用：将鼠标悬停在这些列表项上。发生与Nestable JS相同的事情。

有没有办法避免这种压倒一切？要根据情况同时使用游标指针和移动？

感谢。

Answer 1

而不是在{"price":45.99}上设置光标样式，而是将其设置为普通的类选择器。

:hover

当鼠标指针在元素上移动时，应将光标设置为指针。如果它不是这样工作，请检查您使用的框架是否具有更大的级联级别（例如.ul .ui-state-default li { cursor: pointer; }。您必须获得更大的“级联级别”，如此语句才能覆盖它。< / p>

或者只是使用.first-class .second-class .thirdclass {...}（不要经常使用它，因为重写这种风格每次都会变得更难）

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

1 个答案: