首页 > 文章 > web前端 > 如何将光标样式设置为没有 href 的链接的指针？

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

王林转载: 2023-08-24 12:13:02603浏览

我们可以使用HTML中的标签来添加网页的链接。元素的默认光标样式是指针，但从标记中删除 href 属性会更改光标样式。

因此，在本教程中，我们将学习在没有 href 属性的情况下将光标样式保持为标记的指针。

用户可以按照下面的示例查看元素的默认光标样式

示例

在下面的示例中，我们使用标记创建三个不同的链接。

在输出中，我们可以观察到，当我们将鼠标悬停在第一个链接上时，光标变为指针，因为它包含 href 属性；对于第二个链接，光标也变成一个指针，因为它还包含一个带有空字符串值的 href 属性，当我们将鼠标悬停在第三个链接上时，光标样式会发生变化，因为它不包含 href 属性。

<html>
<body>
   <h2>Cursor pointer on the anchor texts</h2>
   <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a>
   <br> <br>
   <a href = ""> Cursor pointer </a>
   <br> <br>
   <a> No cursor pointer </a>
</body>
</html>

现在，用户了解了当我们从标记中删除 href 属性时光标样式如何变化。

下面，我们将看一下为没有 href 属性的链接设置光标指针的示例。

语法

用户可以按照下面的语法，使用 css 将光标指针设置为不带 href 属性的链接。

<style>
  .pointer {
     cursor: pointer;
   }
</style>

在上面的语法中，“pointer”是分配给元素的类，我们更改了包含“pointer”类的元素的指针样式。

示例

在下面的示例中，我们创建了两个不同的元素，并将“pointer”类分配给这两个元素。在部分，我们添加了网页的内联样式。我们在

<html>
<head> 
   <style>
      .pointer {
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h2>Using the CSS to set the cursor pointer on the anchor texts in the link without the href attribute </h2>
   <a class = "pointer"> cursor pointer </a>
   <br> <br>
   <a class = "pointer"> No href attribute </a>
</body>
</html>

示例

在下面的示例中，我们使用“cursor:pointer”样式将不带 href 属性的元素的光标样式设置为指针，如示例 2 所示，但我们已将内联 CSS 应用于标记。

<html>
<body>
   <h3>Using the inline CSS to set cursor pointer on the anchor texts in the link without the href attribute. </h3>
   <a style = "cursor: pointer;"> cursor pointer </a>
</body>
</html>

示例

在下面的示例中，我们使用了“onmouseover”事件属性。每当鼠标指针移到标记上时，它就会调用分配给它的回调函数。在这里，我们分配了一行 CSS，而不是分配回调函数。

因此，每当用户将鼠标悬停在不带 href 属性的标记上时，都会将光标样式设置为指针。

<html>
<body>
   <h3>Using the onmouseover event and css to add cursor pointer on the anchor texts in the link without herf attribute </h3>
   <a onmouseover = "this.style.cursor='pointer'"> Link 1 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 2 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 3 </a> <br>
   <a onmouseover = "this.style.cursor='pointer'"> Link 4 </a> <br>
</body>
</html>

示例

在下面的示例中，我们使用了带有 href 属性的标记，但我们已将空字符串指定为 href 属性的值。因此，它会自动充当空链接并为标记设置光标指针。

<html>
<body>
   <h3>Assigning the empty value to the href attribute to add cursor pointer </i> on the anchor texts</h3>
   <a href = ""> Link 1 </a> <br>
   <a href = ""> Link 2 </a> <br>
</body>
</html>

在本教程中，我们学习了如何将光标样式设置为不带 href 属性的链接上的指针。我们使用 CSS 来更改光标样式。此外，我们还使用 onmouseover 事件属性来检测鼠标悬停事件并相应地更改光标样式。

以上是如何将光标样式设置为没有 href 的链接的指针？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何用Javascript将Summernote Editor添加到网页中？下一篇：JavaScript 中 unescape() 和 escape() 函数有什么区别？

查看更多