Change the mouse cursor on mouse over to anchor-like style

shibly picture shibly · Aug 25, 2011 · Viewed 205.1k times · Source

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?

Answer

Devin Burke picture Devin Burke · Aug 25, 2011

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');