前端必知：29，改变鼠标手势及鼠标手势的应用

目录

一，鼠标手势

关键字：cursor

         值：

crosshair 用于精确定位的 十字形

pointer鼠标显示小手

move拖拽效果时候的鼠标样式

text 鼠标悬浮在文本上的样子

wait 鼠标等待加载时候的样子

help鼠标显示带问号箭头

not-allowed 禁用效果

default 默认指针样式

auto鼠标按照默认的状态根据页面上的内容自行修改样式

user-select: none;   禁止用户选中文字

鼠标手势的作用 

1.提示操作：

2.表示链接类型：

3.强调交互元素：

4.创造特殊效果：

相关代码 

一，鼠标手势  

在 CSS 中，鼠标手势（Mouse cursor）是指在光标悬停在特定元素上时，鼠标光标的外观样式。它可以通过 CSS 样式属性来定义，使开发者能够控制光标在不同情况下的外观，从而增强用户体验和交互性。

关键字：cursor

         值：

crosshair 用于精确定位的 十字形   

            /* 十字形 */

            cursor: crosshair;

pointer鼠标显示小手

            /* 小手儿 */

            cursor: pointer;

move拖拽效果时候的鼠标样式

           /* 移动效果 */

            cursor: move;

text 鼠标悬浮在文本上的样子

           /* 查看文本效果 */

            cursor: text;

wait 鼠标等待加载时候的样子

           /* 鼠标等待效果 */

            cursor: wait;

help鼠标显示带问号箭头

           /* 带问号的箭头 */

            cursor: help;

not-allowed 禁用效果

             /* 禁用效果 */

            cursor: not-allowed;

default 默认指针样式

              /* 默认指针 */

            cursor: default;

auto鼠标按照默认的状态根据页面上的内容自行修改样式

     * 根据内容自己改变样式 */

            cursor: auto;

user-select: none;   禁止用户选中文字

        * 禁止用户选中文字 */

            user-select: none;

鼠标手势的作用 

1.提示操作：

鼠标手势可以向用户提供操作提示，告诉用户在特定元素上执行鼠标操作时会发生什么。例如，在链接上悬停时，设置鼠标手势为手形，表示链接可以点击。这样用户可以更清楚地了解可交互元素的功能，提高了用户的可用性和易用性。

2.表示链接类型：

通过修改鼠标手势，可以向用户暗示链接的类型。例如，当鼠标悬停在图片上时，将鼠标手势改为放大镜图标，表示该图片可点击并查看大图。这种方式可以让用户快速识别可交互元素的类型，增强整体界面的可读性和可点击性。

3.强调交互元素：

将鼠标手势与特定的交互元素配合使用可以增强用户对该元素的注意力。例如，在悬停在按钮上时，将鼠标手势设置为手形，让用户更容易发现该按钮并点击它。这有助于提高用户的操作意愿和效率。

4.创造特殊效果：

通过自定义鼠标手势样式，可以为网页创造出独特的风格和效果。例如，将鼠标手势修改为自定义的图标、动画或特殊形状，可以使用户的导航体验更加个性化和丰富。

总的来说，鼠标手势在网页设计中起着重要的作用，通过改变光标的样式和形状，可以向用户传达关于交互元素的信息，提高用户体验和界面的可用性，同时也为页面添加了一些创意和特殊效果。

相关代码 

    
    
    Document
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            background-color: #04be02;
            /* 十字形 */
            cursor: crosshair;
            /* 小手儿 */
            cursor: pointer;
            /* 移动效果 */
            cursor: move;
            /* 查看文本效果 */
            cursor: text;
            /* 鼠标等待效果 */
            cursor: wait;
            /* 带问号的箭头 */
            cursor: help;
            /* 禁用效果 */
            cursor: not-allowed;
            /* 默认指针 */
            cursor: default;
            /* 根据内容自己改变样式 */
            cursor: auto;
            /* 禁止用户选中文字 */
            user-select: none;
        }
        select{
            width: 200px;
            height: 40px;
            /* 重置样式 */
            appearance: none;
            background: url(./images/矢量智能对象3.png) no-repeat  160px center;
            background-size: 20px 10px;
        }
    


    
    极致就是把自己逼疯
    
        周
        周
        周
        周