使<a>标签悬停时改变鼠标样式

Question

使<a>标签悬停时改变鼠标样式

3

可能重复：
如何在鼠标悬停在<li>元素上时将鼠标指针变成手形？

基本上，我正在使用一个JavaScript库，通过点击表头使表格可排序。我自己没有JavaScript经验。唯一的问题是，点击表格并不是最直观的操作。因此，我想让它看起来像一个链接。我已经给它加了下划线，但仍然不是特别明显，因为当你悬停在它上面时，鼠标的外观没有改变。我想把鼠标图像改成当你悬停在链接上时所得到的手形。目前，那些我想要看起来像链接的只是一个空白（没有href）。有没有简单的方法可以做到这一点，是否涉及JavaScript，有没有人知道如何做？

- matts1

实际上，如果您有<a>标签，简单的解决方案是添加href属性。可以使用<a href="#">或<a href="">并阻止默认链接操作。 - JJJ

2个回答

1

使用CSS添加如下内容：

a {
      cursor: pointer;
}

你也可以考虑使用悬停效果。

经过进一步思考，你必须是错误地使用了 a 标签。href 总是必需的，不应该留空，因此请使用 <a href="#">链接</a>。这将解决你的问题。

- John Wheal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Filip Roséen - refp · Accepted Answer

问题确实可以通过使用JavaScript来解决，但你最好利用CSS的强大功能。

如果你想让鼠标在悬停时改变某个元素，那么如果它是一个a元素，你最好添加href属性并将值设置为"#"，让浏览器自动处理光标的更改。

<a href="#">I'm a real link, but pressing me won't lead to another webpage</a>

示例片段（使用CSS）

<html>
  <head>

    <style>
      th:hover {
        cursor:pointer;
      }   
    </style>

  </head>
  <body>

    <table border="1">
      <tr> <th>Header 1</th> <!-- --> <th>Header 2</th> </tr>
      <tr> <td>value 1 </td> <!-- --> <td>value 2 </td> </tr>
    </table>

  </body>
</html>

^{jsFiddle 实时示例}