鼠标划上之cursor

最新推荐文章于 2022-06-16 09:59:21 发布

陈田田

最新推荐文章于 2022-06-16 09:59:21 发布

阅读量471

点赞数

分类专栏： HTML CSS 前端集结号文章标签： cursor html

本文链接：https://blog.csdn.net/candy_tity/article/details/54603822

版权

前端集结号同时被 3 个专栏收录

61 篇文章 5 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

用户在使用浏览器查看页面时，许多鼠标划上的操作可以提升用户体验度。
比如在默认的文字上显示的是光标，在可点击的链接处显示的是手型，可以说这两种使我们最为常用的显示方式。

但除了这些之外，还有许多的鼠标划上显示方式，如下如：
这里写图片描述

对应于cursor可以使用的值都在上面的表格中，这里是一段示例代码，大家可以复制感受一下。


<!DOCTYPE html>
<html>
<head>
    <title>cursor</title>
    <style type="text/css">
        div {
            width: 500px;
            height: 32px;
            margin: 3px auto;
            padding: 2px;
            border: 1px solid #eee;
            background: #f0f0f0;
            line-height: 32px;
        }
    </style>
</head>
<body>
    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
    <div style="cursor:auto">Auto</div>
    <div style="cursor:crosshair">Crosshair</div>
    <div style="cursor:default">Default</div>
    <div style="cursor:pointer">Pointer</div>
    <div style="cursor:move">Move</div>
    <div style="cursor:e-resize">e-resize</div>
    <div style="cursor:ne-resize">ne-resize</div>
    <div style="cursor:nw-resize">nw-resize</div>
    <div style="cursor:n-resize">n-resize</div>
    <div style="cursor:se-resize">se-resize</div>
    <div style="cursor:sw-resize">sw-resize</div>
    <div style="cursor:s-resize">s-resize</div>
    <div style="cursor:w-resize">w-resize</div>
    <div style="cursor:text">text</div>
    <div style="cursor:wait">wait</div>
    <div style="cursor:help">help</div>
</body>
</html>

陈田田

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标划上之cursor

用户在使用浏览器查看页面时，许多鼠标划上的操作可以提升用户体验度。比如在默认的文字上显示的是光标，在可点击的链接处显示的是手型，可以说这两种使我们最为常用的显示方式。但除了这些之外，还有许多的鼠标划上显示方式，如下如：对应于cursor可以使用的值都在上面的表格中，这里是一段示例代码，大家可以复制感受一下。<!DOCTYPE html><html><head> <title>c
复制链接

扫一扫