Cursor style doesn't update when element dynamically moved under it
Temporarily manually setting the cursor to move seems to work.
As soon as the mouse is moved again, the JS-applied CSS is cleared + normal behavior takes over.
http://jsfiddle.net/x0nbvt25/2/
$(document).ready(function(){
$("body").on("click", function(c){
$(".drag").offset({
top: c.pageY-8,
left: c.pageX-25
});
$("body").css("cursor", "move");
$("body").mousemove(function(){
$("body").css("cursor", '');
});
});
});
Change the mouse cursor on mouse over to anchor-like style
Assuming your div
has an id="myDiv"
, add the following to your CSS. The cursor: pointer
specifies that the cursor should be the same hand icon that is use for anchors (hyperlinks):
CSS to Add
#myDiv
{
cursor: pointer;
}
You can simply add the cursor style to your div
's HTML like this:
<div style="cursor: pointer">
</div>
EDIT:
If you are determined to use jQuery for this, then add the following line to your $(document).ready()
or body onload
: (replace myClass
with whatever class all of your div
s share)
$('.myClass').css('cursor', 'pointer');
Getting the browser cursor from wait to auto without the user moving the mouse
It is a bug in both browsers at the moment. More details at both links (in comments as well):
http://code.google.com/p/chromium/issues/detail?id=26723
and
http://code.google.com/p/chromium/issues/detail?id=20717
Change the mouse pointer using JavaScript
Javascript is pretty good at manipulating css.
document.body.style.cursor = *cursor-url*;
//OR
var elementToChange = document.getElementsByTagName("body")[0];
elementToChange.style.cursor = "url('cursor url with protocol'), auto";
or with jquery:
$("html").css("cursor: url('cursor url with protocol'), auto");
Firefox will not work unless you specify a default cursor after the imaged one!
other cursor keywords
Also remember that IE6 only supports .cur and .ani cursors.
If cursor doesn't change: In case you are moving the element under the cursor relative to the cursor position (e.g. element dragging) you have to force a redraw on the element:
// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);
working sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First jQuery-Enabled Page</title>
<style type="text/css">
div {
height: 100px;
width: 1000px;
background-color: red;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script></head>
<body>
<div>
hello with a fancy cursor!
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
</script>
</html>
Related Topics
Detecting Physical Screen Dimensions of Webkit Devices in JavaScript
How to Make React-Bootstrap's Dropdown Open on Mouse Hover
Getting the Rgb Values for a CSS/HTML Named Color in JavaScript
Click Event Doesnt Work in Safari Mobile for Some HTML Content
Disabling iOS Elastic Body Scroll & Keep Native Scrolling Working
Calculate Absolute Dimensions of a Div Rotated in Perspective with CSS3
Bootstrap 3 Popover Arrow and Box Positioning
Greek and Text-Transform:Uppercase
JavaScript to Print Contents of Only Specific <Div>
How Detect Which Child Element Is Visible After Scrolling the Parent Div
Find Unused CSS Rule and Js Script in a Web Project
How to Activate a CSS3 (Webkit) Animation Using JavaScript
Getcomputedstyle Gives "Transparent" Instead of Actual Background Color