Menu
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?
558
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
Step 1: Click on the Search box located in the taskbar. Step 2: Type in "mouse." Step 3: Select Change your mouse settings from the resulting list of options to open the primary mouse settings menu. Step 4: Select Additional mouse options.
The default cursor for a hyperlink is "pointer". To change it, you need to specify the cursor type for your <a> element with the CSS :hover selector.
Click “Mouse” form the pane on the left, scroll through the options until you see”Additional mouse options”, and click on it. Click the tab labeled “Pointers”. Now, from the list of cursors under the Customise section, click one that you want to change, and then click “Browse”.
Nevertheless, here are a few steps you can try: Click on the Start button. Open the Control Panel . Click on Mouse . Select the Pointers tab. If you want to the look of all your pointers, click on Scheme and select a new mouse pointer scheme. If you want to change the design of a single pointer, click on a pointer below the Customize section.
But if you want to have a hand pointer for all of your list items, just set the style for the <li> element. Now let’s see an example of changing a mouse pointer into a hand pointer by using the "pointer" value of the cursor property.
The default cursor for a hyperlink is "pointer". To change it, you need to specify the cursor type for your <a> element with the CSS :hover selector. In our example, we style only the "link" class. Example of changing the “pointer” to “default”: ¶
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');
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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
