数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何为没有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://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一样，但是我们将内联CSS应用于<a>标签。
<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事件属性来检测鼠标悬停事件并相应地更改光标样式。
2K+ 次浏览
