CSS 如何在用户悬停在列表项上时将光标更改为手型

通常情况下，当我们在HTML文档中悬停或将光标放在元素上时，默认情况下光标会以箭头或选择器的形式出现。但是，我们可以通过使用CSS属性来更改在悬停到特定元素上时光标的行为，可以使其显示为任何可用的光标类型。

现在让我们讨论并了解如何使用:hover状态和CSS的cursor属性将光标的行为更改为特定元素。

cursor属性

CSS中的cursor属性具有许多光标行为类型。通常，它与hover状态一起使用，以在光标行为上显示一些差异，并吸引用户注意该元素。它有许多光标类型的选项，但是在这个示例中，我们只会谈论在列表中将光标在悬停时更改为手型。

有两种手型光标类型可以更改为默认光标：

Grab
Pointer

现在让我们通过将其详细实施到JavaScript代码示例中来理解它。

步骤

第1步 - 在第一步中，我们将使用HTML的任何类型的列表元素创建一个不同项的列表。
第2步 - 在下一步中，我们将为所有列表（<li>）元素分配一个类。
第3步 - 在此步骤中，我们将使用前一步骤中给出的类获取所有列表项，然后使用悬停状态将光标在悬停时更改为这些列表项。

示例1

下面的示例将解释如何在特定的列表项悬停时将光标更改为指针形式-

<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>

在上面的示例中，我们已经看到了如何在悬停时更改列表项上的光标类型。一旦悬停在任何列表项上，光标将从箭头变为指针。

现在让我们讨论另一个代码示例，以实现并在悬停到列表项时将光标的行为更改为抓取。

此示例的算法与之前示例的算法相同，您只需将列表项的悬停状态CSS中的光标类型从指针更改为抓取。

示例2

以下示例将实现并更改光标的行为，从箭头变为抓取和指针 –

<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>

上面的示例会改变默认鼠标指针的行为，从箭头变成抓取的手指形状，它会将鼠标指针行为转换为抓取当鼠标悬停在偶数列表项上时，它会将鼠标指针改变为手指形状。