【问题标题】:how to set cursor style to pointer for links without hrefs如何将光标样式设置为没有href的链接的指针
【发布时间】:2011-01-25 11:22:51
【问题描述】:

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

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

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

【问题讨论】:

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

标签: javascript html css hyperlink mouse-cursor


【解决方案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'}}>
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-01-01
            • 2016-02-08
            • 2021-11-11
            • 2022-01-06
            • 1970-01-01
            相关资源
            最近更新 更多