If I hover the mouse over a div the mouse cursor will be changed to the cursor like that in HTML anchor.
How can I do this? Do I need Javascript or it's possible with CSS only?
This question is related to
javascript
css
mouse
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 divs share)
$('.myClass').css('cursor', 'pointer');
You actually don't need jQuery, just CSS. For example, here's some HTML:
<div class="special"></div>
And here's the CSS:
.special
{
cursor: pointer;
}
If you want to do this in jQuery instead of CSS, you basically follow the same process.
Assuming you have some <div id="target"></div>, you can use the following code:
$("#target").hover(function() {
$(this).css('cursor','pointer');
}, function() {
$(this).css('cursor','auto');
});
and that should do it.
I think :hover was missing in above answers. So following would do the needful.(if css was required)
#myDiv:hover
{
cursor: pointer;
}
This will
#myDiv
{
cursor: pointer;
}
Source: Stackoverflow.com