change cursor to finger pointer

Question

I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

I read somewhere that I need to put:

onmouseover="cursor: hand (a pointing hand)"

But it's not working for me.

Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.

Moa

it's css and the onmouseover event is a javascript event. – Tunicate

You do not put css directly in onmouseover="". Also, cursor:hand while hovering over your link should be the default action. If this is not happening, there may be another issue at hand. – Classics

possible duplicate of how to set cursor style to pointer for links without hrefs – Lesson

possible duplicate of How can I make the cursor a hand when a user hovers over a list item? – U

lol "Hand..... a pointing hand!" haha sorry, I couldn't resist. – Swingletree

Answer 1

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

It's css.

Or in a style sheet:

a.menu_links { cursor: pointer; }

Tunicate

After testing this, it seems like it's necessary to have both onmouseover="" AND style=cursor: pointer;". If you just have the style tag, the pointer pointer cursor will disappear/default to the standard pointer after one click interaction. Good post Scott, thank you. – Helpmate

@DnfD you only need the onmouseover if there is no href definition. If, like a standard anchor, there is an href definition, the onmouseover isn't necessary. – Tunicate

@DnfD the accepted answer is kind of awful, really. it does the job, but isn't clear. remove mouseover="" and style="cursor: pointer;" leave class="menu_links" it will work! regardless of whether href is in there or not. – Misogyny

@Tunicate no, you do not need the mouseover event in there. see my previous comment to DnfD – Misogyny

@JarettLloyd much depends upon browser support and CSS construction. This is a 2012 answer. Things have changed in 6+ years. – Tunicate

@Tunicate therefore? Are you saying I am incorrect? If so, can you explain how? I can whip up a quick jsfiddle to show how my way will work. My method is not complex n works across all major browsers... – Misogyny

Answer 2

You can do this in CSS:

a.menu_links {
    cursor: pointer;
}

This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).

Negativism

i don't have a href coz i don't want to leave the page. its a link that triggers a JS function and if i insert href="#" it messes it up and it reloads the wrong page – Moa

@DvirLevy - So either return false and use href="#", or just use the CSS as I've shown you... – Negativism

Answer 3

I like using this one if I only have one link on the page:

onMouseOver="this.style.cursor='pointer'"

Morgen

Answer 4

in css write

a.menu_links:hover{ cursor:pointer}

Normand

Answer 5

Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:

url('assets/imgs/theGoods.png');

below is the code:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is

<div class='cursor'></div>

and only in that div, that cursor will show. So I usually add it to the body tag.

Transoceanic

Answer 6

I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.

There may be nothing wrong with the inquirer's link. consider the following html:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.

the answer being sought for is this (which was posted by another):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:

a.lendhand {
  cursor: pointer;
}

then:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.

jarett.

Misogyny

Answer 7

Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Or make displayData() return false and ..="return displayData(..)

Scandinavian

Answer 8

Solution via pure CSS as mentioned in answer marked as the best is not suitable for this situation.

The example in this topic does not have normal static href attribute, it is calling of JS only, so it will not do anything without JS.

So it is good to switch on pointer with JS only. So, solution

onMouseOver="this.style.cursor='pointer'"

as mentioned above (but I can not comment there) is the best one in this case. (But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)

Chagall

Answer 9

 <! ––  add this code in your class called menu_links -->
<style> 
.menu_links{
cursor: pointer;
}
</style>

In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.

And if you use [cursor: default] it will show the usual arrow cursor that appears.

To know more about cursors and their appearance click the below link: https://www.w3schools.com/cssref/pr_class_cursor.asp

Fabozzi

Answer 10

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}

<div> im Pointer  cursor </div> 
<p> im Txst cursor </p> 

Downwash