如何将HTML中的CSS列表标签的光标变成手形

本教程告诉你如何将HTML中的CSS列表标签的光标变成手形。

它涵盖了手形光标的CSS样式。

• 有序列表
• 无序列表

通常，手形光标用于锚点样式，有时我们需要应用于顺序和无序的列表项。

无序列表的CSS光标手部样式

让我们创建一个有序列表，使用

html中的标签

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

它在页面中以默认的鼠标指针悬停项目的方式呈现如下。

默认的行为是如果用户指向项目，它会显示鼠标指针，点击多个项目，它会选择项目。

以下是css属性，显示手形光标。

• cursor:pointer
• cursor:grab
• cursor:hand

你可以使用其中一个支持所有浏览器的属性。

要应用悬停项，你需要在列表项上添加:hover 伪选择器。

li:hover { cursor: pointer; }

下面是一个使用父选择器的sass代码

li{
    &:hover { 
        cursor: pointer; 
    }
}

它渲染了一个无序的列表，每个项目在悬停时都显示光标手。

订单列表的CSS手形光标指针

让我们创建一个订单列表

<ol>
  <li>Switzerland</li>
  <li>USA</li>
  <li>Germany</li>
</ol>

它在页面中显示如下，在悬停的项目上显示默认的鼠标指针。

以下是用于显示手形指针的CSS属性。

• cursor:pointer
• cursor:grab
• cursor:hand

: hover 伪选择器用于应用悬停的样式

li:hover { cursor: pointer; }