Html Javascript / Onclick - 鼠标悬停时使鼠标光标成为一只手
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15147843/
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
Javascript / Onclick - Make the mouse cursor a hand when mousing over
提问by Kevin
I'm working with a voting button.
我正在使用投票按钮。
The button was a simple link, but the search engine spiders were crawling the pages and triggering false votes. So, I changed it to an onclick to make that stop.
该按钮是一个简单的链接，但搜索引擎蜘蛛正在抓取页面并触发虚假投票。因此，我将其更改为 onclick 以使其停止。
However, after doing that, the buttons still work fine, but the mouse cursor no longer has the 'hand' pointer. It remains the arrow pointer when you mouse-over, so it's hard to tell that it's an actual functioning link.
但是，这样做之后，按钮仍然可以正常工作，但是鼠标光标不再具有“手”指针。当您将鼠标悬停时，它仍然是箭头指针，因此很难说它是一个实际运行的链接。
To attempt to fix this, I added a style="cursor:default;", I also tried style="cursor:crosshair;" to try and change the cursor behavior, but it's not working. The cursor remains the pointer the whole time.
为了解决这个问题，我添加了一个 style="cursor:default;"，我也尝试过 style="cursor:crosshair;" 尝试更改光标行为，但它不起作用。光标始终是指针。
Here's my code:
这是我的代码：
<map id="vote_buttons" name="vote_buttons">
<area shape="rect" alt="" coords="5,3,78,43" onClick="window.location='http://www.site.com/page.php?vote=Y'" style="cursor:default;" title="" />
<area shape="rect" alt="" coords="83,3,160,44" onClick="window.location='http://www.site.com/page.php?vote=N'" style="cursor:pointer;" title="" />
<area shape="default" nohref="nohref" alt="" />
</map>
What am I missing here to make this mouse-over look like a hand?
我在这里错过了什么让这个鼠标悬停看起来像一只手？
Thanks in advance as always.
一如既往地提前致谢。
采纳答案by Kevin
So I discovered a work around. I'm not entirely happy with it, but it seems to be doing the job. Basically, I just added a href="#" to the tag. This makes the hand appear and most of the time the click works like it should.
所以我发现了一个解决方法。我对它并不完全满意，但它似乎在做这项工作。基本上，我只是在标签中添加了一个 href="#"。这会使手出现，并且大多数时候点击都像它应该的那样工作。
<map id="vote_buttons" name="vote_buttons">
<area href="#" shape="rect" alt="" coords="5,3,78,43" onClick="window.location='http://www.site.com/page.php?vote=Y'" style="cursor:default;" title="" />
<area href="#" shape="rect" alt="" coords="83,3,160,44" onClick="window.location='http://www.site.com/page.php?vote=N'" style="cursor:pointer;" title="" />
</map>
回答by Josue Espinosa
You can do this in css!
你可以在css中做到这一点！
just add this to the element you want the style.
只需将此添加到您想要样式的元素。
cursor:pointer;
回答by Drew
In your CSS put this:
在你的 CSS 中输入：
#vote_buttons {
cursor:hand;
}
This will make it so that your cursor turns into a hand while hovering over the button.
这将使您的光标在悬停在按钮上时变成一只手。
回答by Justin Chmura
Actually I found the answer here: Cursor not changing to pointer in Usemap/area case
其实我在这里找到了答案：Cursor not changed to pointer in Usemap/area case
In your case, just add the href="javascript:void(0)"to each <area>.
在您的情况下，只需将href="javascript:void(0)"加到 each <area>。
Example: http://jsfiddle.net/yE5bQ/
回答by Jeff Phillips
Try this above head, it works in IEand HTA's, trick was to include URL...
试试这个，它适用于IE和HTA，技巧是包含URL...
<!-- put the following code inside your [body] button or anchor -->
<!-- onmousedown="mouseDown1()" onmouseup="mouseOut1()" -->
<script type="text/javascript">
function mouseDown1() {
document.body.style.cursor = 'url(anim2.cur)';
}
function mouseOut1() {
document.body.style.cursor = 'url(anim1.cur)';
}
function calc() {
var dummy = 0;
for (var i=0; i<100000;i++) {
for (var z=0; i<100000;i++) {
dummy = dummy + z + i;
}
}
cursor_clear();
}
</script>
