CSS光標指針覆蓋內嵌樣式光標項目列表拖動

我使用的Nestable JS庫和我在我的樹嵌套的項目清單上，我想補充一個cursor: pointer當我將鼠標懸停在他們身上也，cursor: move拖動時。但我無法讓它工作。CSS光標指針覆蓋內嵌樣式光標項目列表拖動

我發現，在jQuery用戶界面發生了同樣的事情，所以在這裏我有一個小小提琴表明：

$(document).ready(function() { 
 
    $(".sortableList").sortable({ 
 
     revert: true, 
 
     cursor: 'move', 
 
     start: function(event) { 
 
     \t event.target.style.cursor = 'move'; 
 
     }, 
 
     stop: function(event) { 
 
     \t 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的一部分，我將最後一條規則註釋掉，因爲如果光標指向：指針懸停在這些列表項上，則不起作用。在Nestable JS中發生的情況與此相同。

有沒有辦法避免壓倒一切？有兩個遊標指針並根據情況移動？

謝謝。的

來源

2017-03-27 msqar

你是否看了'classes'選項？*指定的其他類添加到Widget的元素。在任何類指定主題化部分可作爲鑰匙重寫自己的價值。要了解更多有關此選項，請查看了解類選項文章。* – Twisty

是啊，我知道你說的什麼，但問題是我不使用jQuery UI的對於我的樹，即時通訊使用Nestable JS，發生在jQuery UI發生同樣的事情......不知道爲什麼，有沒有辦法通過Javascript或CSS使這項工作？ – msqar

不知道該告訴你什麼。我從來沒有使用Nestable JS，你的標籤不包含它。拖動或懸停時使用哪些類？ – Twisty

，而不是設置在:hover光標風格本身將其設置爲正常類選擇。

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

當鼠標指針在元素上移動時，應該將光標設置爲指針。如果不是這樣工作，檢查，如果你正在使用的框架有一個更大的級聯級別（例如.first-class .second-class .thirdclass {...}。你必須讓以覆蓋它更大的「級聯層次」這樣的說法。

或者只需使用!important（不要用這個來的時候，因爲覆蓋這種風格變得更難每次）

來源

2017-03-27 20:51:58 user7776232

CSS光標指針覆蓋內嵌樣式光標項目列表拖動

回答

相關問題