CSS cursor pointer is overriding inline style cursor on item list dragging

Question

I'm using the Nestable JS library and I got a list of nestable items in my tree, I would like to add a cursor: pointer when I hover on them and also, cursor: move when dragging. But I can't make it work.

I found that in jQuery UI happens the same thing, so here I got a little fiddle to show that:

 $(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> 

Now, if you check on the CSS part, I have the last rule commented out, because it doesn't work if the cursor is pointer for :hover on those list items. Happens the same thing as in Nestable JS.

Is there a way to avoid that overriding? To have both cursors pointer and move depending on the situation?

Thanks.

Answer 1

instead of setting the cursor style on the :hover itself set it to the the normal class selector.

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

This should set the cursor to pointer when the mouse pointer is moving over the element. If it isn't working like this, check if the framework which you are using has a bigger cascading level (eg .first-class .second-class .thirdclass {...} . You have to get a bigger "cascading level" like this statement in order to override it.

Or simply use !important (Don't use this to often, because overriding this style gets harder every time)