将光标更改为手指指针

Question

我有这个 a ，但我不知道我需要插入“onmouseover”，以便光标会像常规链接一样变为手指指针：

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

我在需要放置的地方读到：

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

但这对我不起作用。

另外，我不确定这是否被视为 JavaScript、CSS，或者只是纯 HTML。

Answer 1

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

这是CSS。

或者在样式表中：

a.menu_links { cursor: pointer; }

Answer 2

您可以在 CSS 中执行此操作：

a.menu_links {
    cursor: pointer;
}

这实际上是链接的默认行为。您必须以某种方式在 CSS 中的其他位置覆盖它，或者其中没有 href 属性（您的示例中缺少该属性）。

Answer 3

如果页面上只有一个链接，我喜欢使用这个：

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

Answer 4

在CSS中写

a.menu_links:hover{ cursor:pointer}

Answer 5

我认为上面的“最佳答案”尽管在编程上是准确的，但实际上并没有回答所提出的问题。问题询问如何更改鼠标悬停事件中的指针。我看到一些帖子，内容是关于如何在某个地方可能会出现错误而没有回答问题。在接受的答案中，鼠标悬停事件为空白 (onmouseover="")，并且包含样式选项。令人费解的是为什么要这样做。

询问者的链接可能没有问题。考虑以下 html：

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

当用户鼠标悬停在该链接上时，指针不会变为手形...相反，指针的行为就像悬停在普通文本上一样。人们可能不希望这样......因此，需要告诉鼠标指针进行更改。

正在寻找的答案是这样的（这是由另一个人发布的）：

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

然而，如果你有很多这样的东西，或者到处使用这种东西并决定做出某种改变，这就是一场噩梦或遇到错误。最好为其创建一个 CSS 类：

a.lendhand {
  cursor: pointer;
}

那么：

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

还有许多其他方法可以说比这种方法更好。 DIV、BUTTON、IMG等可能更有用。不过，我认为使用 ... 没有什么坏处。

贾雷特。

Answer 6

如果你想在这方面做得更多，这里有一些很酷的东西。在 url 中，您可以使用链接或保存图像 png 并使用路径。例如：

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

下面是代码：

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

所以这只能在 128 X 128 尺寸下工作，任何更大的尺寸都不会加载图像。但您实际上可以使用任何您想要的图像！这将被视为纯 css3 和一些 html。您在 html 中要做的就是

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

并且仅在该 div 中，该光标才会显示。所以我通常将它添加到 body 标签中。

Answer 7

添加 href 属性以使其成为有效的链接和链接return false; 在事件处理程序中以防止其导致导航；

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

（或者使 displayData() 返回 false 并 ..="return displayData(..)

Answer 8

通过纯CSS解决方案
正如标记为最佳的答案中提到的
不适合这种情况。

本主题中的示例没有正常的静态 href 属性，
它只是JS的调用，所以没有JS它不会做任何事情。

所以最好只用 JS 来开启指针。
因此，

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

上面提到的解决方案（但我不能在那里发表评论）是这种情况下最好的解决方案。
（但是，一般来说，对于不需要 JS 的普通链接，最好使用没有 JS 的纯 CSS。）

Answer 9

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

在上面的代码中，[cursor:pointer] 用于访问当您将鼠标悬停在链接上时出现的手形光标。

如果您使用[光标：默认]，它将显示通常出现的箭头光标。

要了解有关光标及其外观的更多信息，请单击以下链接：
https://www.w3schools.com/cssref/pr_class_cursor.asp

Answer 10

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}

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