Html 将光标更改为手指指针
我有一个Html 将光标更改为手指指针,html,css,mouseevent,Html,Css,Mouseevent,我有一个a,我不知道我需要插入到“onmouseover”中,这样光标就会像常规链接一样变成手指指针: <a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a> 但这对我不起作用 另外,我不确定这是JavaScript、CSS还是纯HTML。您可以在CSS中执行此操作: a.menu_links { cursor: pointer; } 这实际上是链接的默认行为
a
,我不知道我需要插入到“onmouseover”中,这样光标就会像常规链接一样变成手指指针:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
但这对我不起作用
另外,我不确定这是JavaScript、CSS还是纯HTML。您可以在CSS中执行此操作:
a.menu_links {
cursor: pointer;
}
这实际上是链接的默认行为。您必须在CSS中的其他位置以某种方式覆盖它,或者其中没有
href
属性(示例中缺少该属性)。添加href
属性以使其成为有效链接&返回false事件处理程序中的代码>,以防止其导致导航
<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>
(或使displayData()
返回false和。=“返回css write中的displayData(..
))
a.menu_links:hover{ cursor:pointer}
如果页面上只有一个链接,我喜欢使用此链接:
onMouseOver="this.style.cursor='pointer'"
如果你想更进一步,这里有一些很酷的东西。在url中,你可以使用链接或保存图像png并使用路径。例如:
url('assets/imgs/theGoods.png')
代码如下:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
<>这只会在128×128的大小下工作,任何大的图像都不会加载。但是实际上你可以使用你想要的任何图像!这将是纯粹的CSS3和一些HTML。你在HTML中所要做的就是
<div class='cursor'></div>
只有在那个div中,光标才会显示出来。所以我通常把它添加到body标签中。我认为“最佳答案”“上面的内容虽然在编程上准确,但实际上并没有回答提出的问题。该问题询问如何更改鼠标悬停事件中的指针。我看到一些帖子,内容是关于在没有回答问题的地方可能会出现错误。在接受的答案中,鼠标悬停事件为空(onmouseover=”“
)相反,样式选项也包括在内。令人困惑的是为什么会这样做
PQ>查询者的链接可能没有错。请考虑下面的HTML:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
然后:
点击我!
可以说,还有许多其他方法比这种方法更好。DIVs、按钮s、IMGs等可能更有用。不过,我认为使用..
没有什么害处
jarett.通过纯CSS解决方案
如回答中所述,标记为最佳
不适合这种情况
本主题中的示例没有普通的静态href属性,
它只调用JS,所以没有JS它什么都做不了
因此,只使用JS打开指针是很好的。
那么,解决方案呢
onMouseOver="this.style.cursor='pointer'"
如上所述(但我不能就此发表评论)是这种情况下最好的一种。
(是的,一般来说,对于不需要JS的普通链接,最好使用没有JS的纯CSS。)
div{光标:指针;颜色:蓝色}
p{光标:文本;颜色:红色;}
im指针光标
im Txst光标
.菜单链接{
光标:指针;
}
在上面的代码中,[光标:指针]用于访问鼠标悬停在链接上时出现的手状光标
如果您使用[光标:默认值],它将显示通常出现的箭头光标
要了解有关光标及其外观的更多信息,请单击以下链接:
这是css,onmouseover事件是一个javascript事件。您不能将css直接放在onmouseover=“”。此外,光标:手悬停在链接上时应该是默认操作。如果没有发生这种情况,可能还有另一个问题。可能重复lol“手…”的可能重复…指向的手哈哈,对不起,我无法抗拒。我没有href,因为我不想离开页面。这是一个触发JS函数的链接,如果我插入href=“#”它会把它搞砸,并重新加载错误的文件page@DvirLevy-因此,返回false并使用href=“#”
,或者像我向您展示的那样使用CSS……在测试之后,似乎有必要同时使用onmouseover=“”和style=cursor:pointer;"。如果您只有样式标记,指针指针将在单击交互后消失/默认为标准指针。很好的帖子,谢谢。@DnfD如果没有href
定义,您只需要onmouseover
就可以了。如果像标准锚一样,有href
定义,则onmouseover
不是必需的。@DnfD公认的答案真的有点糟糕。它确实起作用,但不清楚。删除mouseover=“
和style=“cursor:pointer;”“
离开class=“菜单链接”
它会工作的!不管href
是否在那里。@Scott不,你不需要鼠标盖
事件在那里。请参阅我之前对DnfD@JarettLloyd这在很大程度上取决于浏览器支持和CSS构建。这是2012年的答案。6年多以来情况发生了变化。
<div class='cursor'></div>
<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>
a.lendhand {
cursor: pointer;
}
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
onMouseOver="this.style.cursor='pointer'"
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>