Javascript / Onclick - 当鼠标悬停时将鼠标光标变成手形

Question

我正在处理一个投票按钮。

这个按钮原本是一个简单的链接，但是搜索引擎蜘蛛爬取页面时会触发虚假投票。所以，我将其更改为onclick来停止这种情况。

然而，在进行这样的更改后，按钮仍然可以正常工作，但鼠标指针不再有“手”的指针。当您将鼠标悬停在上面时，它仍然是箭头指针，因此很难确定它是一个实际的可用链接。

为了尝试解决这个问题，我添加了style="cursor:default;"，我还尝试过style="cursor:crosshair;"来尝试更改光标行为，但这并没有起作用。光标始终保持指针状态。

以下是我的代码：

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

我在这里缺少什么来使这个鼠标悬停看起来像一只手？

提前感谢您的帮助。

- Kevin

---

尝试使用 cursor: pointer;。 - Justin Chmura

我在上面的例子中使用了cursor:pointer;。我使用得不正确吗？ - Kevin

Answer 1

你可以在css中实现这个功能！只需将以下代码添加到你想要应用样式的元素中。

cursor:pointer;

- Josue Espinosa

Answer 2

实际上，我在这里找到了答案：Usemap/area情况下光标未改变为指针

在您的情况下，只需将href="javascript:void(0)"添加到每个<area>中即可。

示例：http://jsfiddle.net/yE5bQ/

- Justin Chmura

---

实际上，你只能使用href="javascript;"。 - Illidan

根据我的测试，href="javascript;" 试图加载页面 "/javscript;" 并发出404错误，我认为鼓励这样做的评论是错误/不好的。这是在Chrome 97.x.x上的情况。 - Cameron

Answer 3

在你的CSS中添加以下内容：

#vote_buttons {
    cursor:hand;
}

这将使得当你悬停在按钮上时，光标会变成手形。

- Drew

Answer 4

所以我发现了一个解决方法。虽然我并不完全满意，但它似乎能够完成工作。基本上，我只是在标签中添加了 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>

- Kevin

---

你也可以将href添加完整的URL（而不是#），并删除onClick。 - zangrafx

这在很多方面都是“错误”的：

• 添加虚假的href只是为了显示指针光标并不是一个好习惯。
• 使用onclick事件仅用于重定向（而不是使用href）也是一个不好的习惯。
• 不使用CSS来处理样式相关问题也是一个不好的实践。

我认为最好的方法应该是如之前所述，将“cursor: pointer;”添加到正确的CSS文件中，并使用适当的选择器。 - David Diez

@David Diez - 如果你看了我的帖子，你会发现我的代码已经包含了你提出的解决方案。但是在我的情况下并没有起作用，这也是我首先来到这里的原因。哈哈...不过还是谢谢。 - Kevin

@Kevin 哎呀，你说得完全正确！真的很抱歉。如果你编辑你的回答，我会点赞的。去年我写那个的时候不知道在想什么><U - David Diez

Answer 5

尝试在上面放置，它可以在 IE 和HTA's中工作，诀窍是包括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>

- Jeff Phillips