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

我们可以使用HTML中的<a>标签在网页上添加一个链接。<a>元素的默认光标样式是指针，但是从<a>标签中去掉href属性，就会改变光标样式。

因此，在本教程中，我们将学习如何将没有href属性的<a>标签的光标样式保持为指针。

用户可以按照下面的例子来查看<a>元素的默认光标样式

例子

在下面的例子中，我们使用 <a> 标签创建了三个不同的链接。

在输出结果中，我们可以看到，当我们在第一个链接上悬停时，光标变成了指针，因为它包含一个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>

现在，用户明白了当我们从<a>标签中删除href属性时，光标样式是如何变化的。

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

语法

用户可以按照下面的语法，用css为没有href属性的链接设置一个光标指针。

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

在上面的语法中，’pointer’是分配给<a>元素的一个类，我们为包含’pointer’类的元素改变了指针样式。

例子

在下面的例子中，我們建立了兩個不同的 <a> 元素，並把 ‘pointer’ 類別分配給這兩個元素。在 <head> 部分，我们为网页添加了内联样式。我们在<style>标签中访问了’pointer’类，并添加了’cursor: pointer’CSS来添加指针样式的光标。

<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’ 事件属性。每当鼠标指针移动到<a>标签上，它就会调用分配给它的回调函数。在这里，我们指定了一行CSS，而不是指定回调函数。

所以，每当用户将鼠标悬停在没有href属性的<a>标签上时，它就会为指针设置光标样式。

<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属性的<a>标签，但是我们把空字符串作为href属性的一个值。因此，它自动作为一个空链接工作，并为<a>标签设置光标指针。

<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事件属性来检测鼠标移动事件并相应地改变光标样式。