极客笔记如何将没有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 属性的 <a> 元素，就像在示例 2 中一样，但我们对 <a> 标签应用了内联 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>
示例
在下面的示例中，我们使用了<a>标签和href属性，但我们将空字符串作为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事件属性来检测鼠标悬停事件，并相应地改变鼠标样式。