将光标更改为手指指针

Posted 2023-02-19

【中文标题】将光标更改为手指指针

【英文标题】：change cursor to finger pointer

【发布时间】：2012-02-07 06:09:04

【问题描述】：

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

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

我在某个地方读到了我需要放的地方：

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

但这对我不起作用。

另外，我不确定这是 javascript、CSS 还是纯 html。

【问题讨论】：

它是 css 并且 onmouseover 事件是一个 javascript 事件。

你不要把css直接放在onmouseover=""里。此外，将鼠标悬停在链接上时的 cursor:hand 应该是默认操作。如果这没有发生，则可能还有另一个问题。

how to set cursor style to pointer for links without hrefs 的可能重复项

How can I make the cursor a hand when a user hovers over a list item?的可能重复

大声笑“手......一个指向的手！”哈哈对不起，我忍不住了。

【参考方案1】：

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

</style>

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

如果你使用 [cursor: default] 它会显示通常出现的箭头光标。

要了解更多关于光标及其外观的信息，请点击以下链接： https://www.w3schools.com/cs-s-ref/pr_class_cursor.asp

【参考方案2】：

divcursor: pointer; color:blue

pcursor: text; color:red;

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

【参考方案3】：

纯 CSS 解决方案 如答案中所述，标记为最佳 不适合这种情况。

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

所以最好只用 JS 打开指针。 所以，解决办法

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

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

【参考方案4】：

我认为上面的“最佳答案”虽然在程序上是准确的，但实际上并没有回答提出的问题。问题询问如何更改鼠标悬停事件中的指针。我看到有关如何在某处出现错误的帖子没有回答问题。在接受的答案中，鼠标悬停事件为空白 (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>

还有许多其他方法可以说比这种方法更好。 DIVs、BUTTONs、IMGs 等可能会更有用。不过，我认为使用 <a>...</a> 并没有什么坏处。

贾雷特。

【参考方案5】：

如果您想在这方面加倍努力，这里有一些很酷的东西。在 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标签里。

【参考方案6】：

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

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

【参考方案7】：

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

这是CSS。

或者在样式表中：

a.menu_links  cursor: pointer; 

【讨论】：

经过测试，似乎有必要同时拥有 onmouseover="" AND style=cursor:pointer;"。如果您只有样式标签，则指针指针光标将消失/默认为一键交互后的标准指针。斯科特的好帖子，谢谢。

@DnfD 如果有 no href 定义，您只需要 onmouseover。如果像标准锚一样有定义href，则不需要onmouseover。

@DnfD 接受的答案有点糟糕，真的。它可以完成工作，但不清楚。删除 mouseover="" 和 style="cursor: pointer;" 离开 class="menu_links" 它会起作用的！不管href 是否在里面。

@Scott 不，你不需要那里的mouseover 事件。查看我之前对 DnfD 的评论

@JarettLloyd 很大程度上取决于浏览器支持和 CSS 构造。这是一个 2012 的答案。 6 年多来情况发生了变化。

【参考方案8】：

在css中写

a.menu_links:hover cursor:pointer

【参考方案9】：

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

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

（或者让displayData()返回false和..="return displayData(..）

【参考方案10】：

你可以在 CSS 中做到这一点：

a.menu_links 
    cursor: pointer;

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

【讨论】：

我没有 href 因为我不想离开页面。它是一个触发 JS 函数的链接，如果我插入 href="#" 它会搞砸它并重新加载错误的页面

@DvirLevy - 所以要么返回 false 并使用 href="#"，要么只使用我向您展示的 CSS...