124

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?

RyanfaeScotland
  • 1,216
  • 11
  • 30
cola
  • 12,198
  • 36
  • 105
  • 165

6 Answers6

254

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');
Devin Burke
  • 13,642
  • 12
  • 55
  • 82
  • I want to do this with jquery not css – cola Aug 25 '11 at 04:21
  • 7
    @guru: There is no need for scripting. All you need to do is add `style="cursor: pointer"` to your `div`'s HTML. I'll edit my answer with an example. – Devin Burke Aug 25 '11 at 04:22
  • There are five division with same class, i can't add to all this "style="cursor: pointer" – cola Aug 25 '11 at 04:27
  • @guru, if all of the div's have the same class, then you can actually add "cursor: pointer" to the CSS rule for that class in your page's CSS file – attack Aug 25 '11 at 04:32
  • 1
    if the problem is one of targeting, then as Justin already asked, and as everyone always has to ask, POST THE CODE so we can help you attach it – Sinetheta Aug 25 '11 at 04:45
  • @guru: See my **EDIT:** in my answer. I show you how to do what you want using only jQuery; you don't have to modify your CSS file. – Devin Burke Aug 26 '11 at 03:19
25

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.

Ryan Atallah
  • 2,977
  • 26
  • 34
  • 4
    This is superfluous because the cursor for a `div` is *only* visible when the mouse is over it. There is no reason to remove it once the user hovers out because the cursor wouldn't be seen at that time anyway. – Devin Burke Aug 26 '11 at 03:16
  • 2
    While the question was asked very narrowly (about DIVs) this answer applies broadly. It is useful for any HTML element such as tables,

    's, buttons, etc. That's why I +1'd it.

     – PeteH Nov 19 '13 at 06:32
12

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;
}
attack
  • 1,523
  • 12
  • 17
6

This will

#myDiv
{
    cursor: pointer;
}
Sinetheta
  • 9,189
  • 5
  • 31
  • 52
1

I think :hover was missing in above answers. So following would do the needful.(if css was required)

#myDiv:hover
{
    cursor: pointer;
}
being_ethereal
  • 795
  • 7
  • 26
  • 2
    Worked for me without the :hover, and presumably many more as the answer has a lot of positive votes. Did you try it? – dading84 Dec 20 '16 at 12:22
1

As of 2022, JQuery can be safely replaced with vanilla JS. Here's how you would change the style of the div. Let's assume that div has id="myDiv", then:

const myDivElem = document.querySelector("#myDiv");
myDiv.style.cursor = "pointer";

where the argument of querySelector can be any CSS selector.

Kuba
  • 88
  • 8