css鼠标移动上去手指图标

基础概念

CSS鼠标移动上去手指图标通常是通过CSS的伪类:hover来实现的。当用户将鼠标悬停在某个元素上时，该元素的样式会发生变化，从而显示一个手指图标，表示该元素是可点击的。

类型

默认手指图标：浏览器默认的手指图标。
自定义手指图标：通过CSS设置自定义的手指图标，可以是图片或者矢量图形。

应用场景

按钮：在按钮上显示手指图标，表示该按钮是可点击的。
链接：在链接上显示手指图标，表示该链接可以点击跳转。
菜单项：在菜单项上显示手指图标，表示该菜单项可以展开或执行某个操作。

示例代码

以下是一个简单的示例，展示如何使用CSS实现鼠标悬停时显示手指图标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Finger Icon</title>
    <style>
        .clickable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            cursor: pointer; /* 默认手指图标 */
        }

        .clickable:hover {
            cursor: pointer; /* 自定义手指图标 */
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="clickable">Click Me!</div>
</body>
</html>