如何将光标样式设置为没有href的链接的指针

Posted 2023-02-16

【中文标题】如何将光标样式设置为没有href的链接的指针

【英文标题】：how to set cursor style to pointer for links without hrefs

【发布时间】：2011-01-25 11:22:51

【问题描述】：

我有很多没有href 属性的<a> html 标记用于进行onclick javascript 调用。这些链接没有指针样式的光标。他们有文本样式的光标。

如何在不使用href 属性的情况下将光标样式设置为链接指针？

我知道我可以添加 href="#"。我在 html 文档的很多地方都有这个，并且想知道如何在不使用 href 属性的情况下为链接制作光标样式指针。

【问题讨论】：

对了，当你说链接的时候，你的意思是像“test”吗？或者它只是一个执行一些 javascript 的 span 或 div 标签？

【参考方案1】：

如果我没记错的话，请使用 CSS cursor: pointer。

在您的 CSS 文件中：

.link_cursor

    cursor: pointer;

然后只需将以下 HTML 添加到您想要链接光标的任何元素中：class="link_cursor"（首选方法。）

或者使用内联 CSS：

<a style="cursor: pointer;">

【参考方案2】：

style="光标：指针；"

【参考方案3】：

在你的css文件中添加这个......

a:hover 
 cursor:pointer;

如果您没有 css 文件，请将其添加到 HTML 页面的 HEAD

<style type="text/css">
 a:hover 
  cursor:pointer;
 
</style>

您也可以通过在 javascript 末尾返回 false 来使用 href="" 属性。

<a href="" onclick="doSomething(); return false;">a link</a>

这很好，原因有很多。 SEO 或如果人们没有 javascript，则 href="" 将起作用。例如

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@见http://www.alistapart.com/articles/behavioralseparation

编辑：值得注意的是@BalusC 的answer，他提到:hover 对于OP 的用例来说不是必需的。虽然可以使用:hover 选择器添加其他样式。

【讨论】：

没有必要使用 :hover，并且不保证在没有 href 的链接上工作。

我无法想象它在哪里行不通。这是一种很好的学习方式，您可能希望有其他类似于带有 href 属性的链接的添加行为：背景更改、下划线、颜色等。

我已经有一段时间没有使用它了，但是对于 cursor: hand; 的样式

您不需要条件注释 - 只需执行 .myStyle cursor: hand;cursor:pointer; - 较新的浏览器将忽略 hand 属性，因为它们无论如何都不理解它。 IE6 仍然会理解指针 - 指针适用于 ie5 及以下版本。

使用 a 本身可能会导致一些问题。特别是在 IE 中，因为即使您添加了 return false，它们也会触发 OnBeforeUnload；甚至是指向 javascript:void(0); 的链接；导致调用 OnBeforeUnload。我在工作中遇到这个问题很头疼......

【参考方案4】：

给他们一个共同的类（例如链接）。然后在css-file中添加：

.link  cursor: pointer; 

或者按照@mxmissile 的建议，使用 style="cursor:pointer;" 进行内联处理

【参考方案5】：

使用以下 CSS 创建一个类，并使用 onclick 事件将其添加到您的标签中：

cursor:pointer;

【参考方案6】：

当您将鼠标悬停在给定的object (myObject) 上时，这是如何将光标从箭头变为手形的。

myObject.style.cursor = 'pointer';

【讨论】：

首先，欢迎来到 SO，Lou！在发布/回答时，请确保尽可能提供信息，并且不要忘记格式化您的代码示例（就像我为您所做的那样）。

【参考方案7】：

这对我有用：

<a onClick=this.openPopupbox style=cursor: 'pointer'>