Html 将光标更改为手指指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8809909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change cursor to finger pointer
提问by Dvir Levy
I have this aand 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，我不知道我需要插入到“onmouseover”中，这样光标就会像常规链接一样变成手指指针：
<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.
另外，我不确定这是否被认为是 JavaScript、CSS 或纯 HTML。
回答by Scott
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
是css。
Or in a style sheet:
或者在样式表中：
a.menu_links { cursor: pointer; }
回答by Joseph Silber
You can do this in CSS:
你可以在 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 hrefattribute in there (it's missing from your example).
这实际上是链接的默认行为。您必须以某种方式在 CSS 的其他地方覆盖它，或者那里没有href属性（您的示例中缺少它）。
回答by fooschnikens
I like using this one if I only have one link on the page:
如果页面上只有一个链接，我喜欢使用这个：
onMouseOver="this.style.cursor='pointer'"
回答by Mandeep Pasbola
in css write
在css中写
a.menu_links:hover{ cursor:pointer}
回答by Michael Barreiro
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 中，您可以使用链接或保存图像 png 并使用路径。例如：
url('assets/imgs/theGoods.png');
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
所以这只能在 128 X 128 的尺寸下工作，任何更大的图像都不会加载。但是您实际上可以使用任何您想要的图像！这将被认为是纯 css3 和一些 html。你在html中要做的就是
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
并且仅在该 div 中，该光标才会显示。所以我通常将它添加到 body 标签中。
回答by Jarett Lloyd
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.
我认为上面的“最佳答案”虽然在编程上是准确的，但实际上并没有回答提出的问题。问题询问如何更改鼠标悬停事件中的指针。我看到关于一个人如何可能在某处有错误没有回答问题的帖子。在接受的答案中，鼠标悬停事件为空白 ( onmouseover="")，而包含样式选项。令人费解的是为什么要这样做。
There may be nothing wrong with the inquirer's link. consider the following html:
询问者的链接可能没有任何问题。考虑以下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:
然而，这是......如果你有很多这样的东西，或者到处使用这种东西并决定进行某种更改或遇到错误，那将是一场噩梦。最好为它创建一个 CSS 类：
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.
可以说，还有许多其他方法比这种方法更好。 DIVs、BUTTONs、IMGs 等可能更有用。不过，我认为使用 没有坏处<a>...</a>。
jarett.
杰瑞特。
回答by Alex K.
Add an hrefattribute to make it a valid link & return false;in the event handler to prevent it from causing a navigation;
在事件处理程序中添加一个href属性使其成为有效链接 &return false;以防止其导致导航；
<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>
(Or make displayData()return false and ..="return displayData(..)
（或使displayData()return false 和..="return displayData(..）
回答by Martin Adámek
Solution via pure CSS as mentioned in answer marked as the best is not suitable for this situation.
通过标记为最佳的答案中提到的纯 CSS 解决方案不适合这种情况。
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.
本主题中的示例没有正常的静态 href 属性，它只是调用 JS，因此它不会在没有 JS 的情况下执行任何操作。
So it is good to switch on pointer with JS only. So, solution
所以只用JS打开指针是好的。所以，解决方案
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.)
如上所述（但我不能在那里发表评论）在这种情况下是最好的。（但是是的，一般来说，对于不要求 JS 的普通链接，最好使用没有 JS 的纯 CSS。）
回答by Omar bakhsh
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}<div> im Pointer cursor </div>
<p> im Txst cursor </p> 