数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 使鼠标悬停在列表项上时光标变成手型？
通常，当我们将鼠标悬停在 HTML 文档中的元素上时，如果悬停在文本上，光标默认显示为箭头或选择器。但是，我们可以使用 CSS 属性将悬停在所选元素上的光标行为更改为任何类型的可用光标类型。
现在让我们讨论并了解如何使用 :hover 状态和 CSS 的 cursor 属性来更改鼠标悬停在特定元素上的光标行为。
Cursor 属性
CSS 中的 cursor 属性具有许多光标行为类型。通常，它与 hover 状态一起使用，以显示光标行为的一些差异，并吸引用户对该元素的注意力。它具有许多光标类型的选项，但是，在这个例子中，我们只讨论将鼠标悬停在列表中的特定元素上时将光标更改为手型。
默认光标可以更改为两种手型光标：
Grab（抓取）
Pointer（指针）
让我们通过在 JavaScript 代码示例中实际实现它来详细了解它。
步骤
步骤 1 - 在第一步中，我们将使用任何类型的 HTML 列表元素创建一个不同的项目列表。
步骤 2 - 在下一步中，我们将为所有列表 (<li>) 元素分配一个类。
步骤 3 - 在这一步中，我们将使用上一步中给出的类获取所有列表项，然后使用 hover 状态将鼠标悬停在这些列表项上时更改光标。
示例
下面的示例将解释如何将鼠标悬停在特定列表项上时将光标更改为指针：
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
.list_container {
padding: 0;
background-color: bisque;
list-style: none;
}
.list_items {
padding: 5px;
border-bottom: 2px solid #444;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class = "container">
<h3> Making the cursor to hand when a user hovers over a list item using CSS </h3>
<h4> List of a few vegatables: </h4>
<ul class = "list_container">
<li class = "list_items"> Potato </li>
<li class = "list_items"> Tomato </li>
<li class = "list_items"> Onion </li>
<li class = "list_items"> Cabbage </li>
<li class = "list_items"> Lady Finger </li>
</ul>
</div>
</body>
</html>
在上面的示例中，我们看到了如何将鼠标悬停在列表项上时更改光标类型。一旦你将鼠标悬停在任何列表项上，光标将从箭头自动更改为指针。
现在让我们讨论另一个代码示例，以实现并将光标行为更改为抓取（grab）状态，当鼠标悬停在列表项上时。
此示例的算法与前一个示例的算法相同，你只需要在列表项的 hover 状态 CSS 中将光标类型从指针（pointer）更改为抓取（grab）。
示例
下面的示例将实现并将光标行为更改为抓取和指针，而不是箭头：
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
.list_container {
padding: 0;
background-color: bisque;
list-style: none;
}
.list_items {
padding: 5px;
border-bottom: 2px solid #444;
}
.list_items:last-child {
border-bottom: none;
}
.list_items:nth-child(odd):hover {
cursor: pointer;
}
.list_items:nth-child(even):hover {
cursor: grab;
}
</style>
</head>
<body>
<div class = "container">
<h3> Making the cursor to hand when a user hovers over a list item using CSS </h3>
<h4> List of a few vegatables: </h4>
<ul class = "list_container">
<li class = "list_items"> Potato </li>
<li class = "list_items"> Tomato </li>
<li class = "list_items"> Onion </li>
<li class = "list_items"> Cabbage </li>
<li class = "list_items"> Lady Finger </li>
</ul>
</div>
</body>
</html>
上面的示例将默认光标的行为从箭头更改为抓取和指针。当鼠标悬停在偶数列表项上时，它会将光标行为更改为抓取（grab）类型；当鼠标悬停在奇数列表项上时，它会将光标更改为指针。
结论
在本文中，我们通过代码示例实现了两种不同的方法来将光标从箭头更改为手型。在第一个示例中，光标从箭头更改为指针，而在下一个示例中，它在某些选定的列表项上更改为指针和抓取。
浏览量 153
