将光标更改为手指指针

时间:2012-01-10 20:16:34

标签: html css mouseevent

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

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

我读到了我需要放的地方:

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

但它不适合我。

另外,我不确定这是否被视为JavaScript,CSS或纯HTML。

10 个答案:

答案 0 :(得分:416)

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

这是css。

或在样式表中:

a.menu_links { cursor: pointer; }

答案 1 :(得分:47)

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

a.menu_links {
    cursor: pointer;
}

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

答案 2 :(得分:20)

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

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

答案 3 :(得分:8)

在css中写

a.menu_links:hover{ cursor:pointer}

答案 4 :(得分:7)

如果你想加倍努力,这里有一些很酷的东西。在网址中,您可以使用链接或保存图像png并使用该路径。例如:

URL( '资产/ 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标签。

答案 5 :(得分:5)

我认为上面的“最佳答案”虽然程序上准确,但实际上并未回答提出的问题。该问题询问如何更改鼠标悬停事件中的指针。我看到有关如何在某处发生错误的帖子没有回答这个问题。在接受的答案中,mouseover事件为空(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 s, BUTTON s, IMG 等可能会更有用。不过,我认为使用<a>...</a>没有任何害处。

jarett。

答案 6 :(得分:4)

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

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

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

答案 7 :(得分:2)

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

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

所以最好只用JS打开指针。 所以,解决方案

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

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

答案 8 :(得分:0)

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

答案 9 :(得分:-1)

div{cursor: pointer; color:blue}

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