CODEWITHSUNDEEP
javascriptmouse
cola
cola

Reputation: 12466

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

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?

Upvotes: 129

Views: 281917

Answers (6)

Kuba
Kuba

Reputation: 149

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.

Upvotes: 4

being_ethereal
being_ethereal

Reputation: 825

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

#myDiv:hover
{
    cursor: pointer;
}

Upvotes: 2

Devin Burke
Devin Burke

Reputation: 13820

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

Upvotes: 261

Ryan Atallah
Ryan Atallah

Reputation: 2987

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.

Upvotes: 25

Sinetheta
Sinetheta

Reputation: 9429

This will

#myDiv
{
    cursor: pointer;
}

Upvotes: 6

attack
attack

Reputation: 1523

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;
}

Upvotes: 12

Related Questions