将光标更改为手指指针

我有这个a,我不知道我需要插入到“onmouseover”中,这样光标就会像普通链接一样变成手指指针:

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

我在某个地方读到我需要写的东西:

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

但这对我没用。

另外,我不确定这是否被认为是JavaScript, CSS,或只是普通的HTML。

623459 次浏览

你可以在CSS中这样做:

a.menu_links {
cursor: pointer;
}

这实际上是链接的默认行为。你必须以某种方式在CSS的其他地方覆盖它,或者那里没有href属性(在你的例子中没有它)。

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

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

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

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

css。

或者在样式表中:

a.menu_links { cursor: pointer; }

在CSS中写入

a.menu_links:hover{ cursor:pointer}

如果我在页面上只有一个链接,我喜欢使用这个:

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

如果你想多花点心思,这里有一些很酷的东西。在url中,您可以使用链接或保存PNG图像并使用路径。例如:

url(“资产/一/ 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标签中。

我认为上面的“最佳答案”,尽管在编程上是准确的,但实际上并没有回答所提出的问题。问题询问如何更改鼠标悬停事件中的指针。我看到有帖子说有人可能在某个地方犯了错误,但没有回答问题。在接受的答案中,鼠标悬停事件为空(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>

可以说,还有很多其他方法比这种方法更好。__abc1, __abc2, __abc3等可能更有用。不过,我认为使用<a>...</a>没有坏处。

jarett。

解决方案通过纯CSS 如上所述的答案标记为最好的

本主题中的示例没有正常的静态href属性, 它只调用JS,所以没有JS它什么都不会做 所以只在JS中打开指针是很好的。 因此,解决方案< / p >

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

如上所述(但我不能在那里评论)是这种情况下最好的一个。 (是的,一般来说,对于不要求JS的正常链接,最好使用纯CSS而不使用JS。)

div{cursor: pointer; color:blue}


p{cursor: text; color:red;}
<div> im Pointer  cursor </div>
<p> im Txst cursor </p> 

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

在上面的代码中,[光标:指针]用于访问当你将鼠标悬停在链接上时出现的手状光标。

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

了解更多关于游标及其外观点击下面的链接: https://www.w3schools.com/cssref/pr_class_cursor.asp < / p >