CSS or javascript click hold function
I use a jquery draggable and I wanted to do is when I click and hold the header, the cursor turns to move cursor. I already tried css active and focus b开发者_高级运维ut nothing happen.
you can define your cursor style this way:
$(function() {
$( "#draggable" ).draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } });
$( "#draggable2" ).draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
});
for more info: http://jqueryui.com/demos/draggable/#cursor-style
For a pure CSS approach, you might find that the CSS :active
pseudo-selector/pseudo-element is the way to go, demo using div:active
at: jsbin
Failing that, though, you might as well use jQuery to add a selector (I'm not quite sure whether .click()
requires the mouse-button to be pressed and released, so I'd suggest mousedown()
$('#divIDOrClass').mouseup(
function() {
$(this).removeClass('active');
}).mousedown(
function() {
$(this).addClass('active')
});
Demo of the jQuery approach at: jsbin.
Incidentally, the reason that :focus
didn't/doesn't work is because :focus
is usually applied to those elements that have keyboard, or other input, focus. This is normally for form input elements and hyper-links (since hyper-links can receive keyboard activation as standard via tab, access-keys and enter).
Did you try the built in cursor functionality for the draggable section?
//The css cursor during the drag operation.
//Code examples
//Initialize a draggable with the cursor option specified.
$( ".selector" ).draggable({ cursor: 'crosshair' });
//Get or set the cursor option, after init.
//getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
//setter
$( ".selector" ).draggable( "option", "cursor", 'crosshair' );
http://jqueryui.com/demos/draggable/#option-cursor
Here's another suggestion for a "pure CSS" (not really, in the sense that we're still working with jQuery UI here) solution: notice that the class ui-draggable-dragging
is added to the element whenever the element is being dragged. Therefore something simple like this:
.ui-draggable-dragging {
cursor: move;
}
Should work. Otherwise Robert's answer with the cursor
option should also do.
精彩评论