如何控制css鼠标样式以及扩大鼠标点击区域

这是我参与更文挑战的第6天，活动详情查看：更文挑战

本文已参与周末学习计划，点击查看详情。

前言

大多数人可能不知道，css是有自己鼠标样式的，从css2.1到css3.0，鼠标样式也在不断的拓展补充。很多时候，我们并不需要去找ui切图以适应ui要求的鼠标指针，因为url引入的鼠标指针可能会有兼容性的问题，比如：Opera 9.3 和 Safari 3 不支持 url 值。

同时，有时候ui给的icon图片很小，用户点来点去都不容易点到，这时候如果你让ui重新切图，原先的样式必定也要跟着调整，这个时候，我们完全可以使用css解决这个小问题。

今天，大冰块就来聊聊css鼠标样式的那点事儿，如何控制 css鼠标样式 以及 扩大点击区域 。

css鼠标样式

鼠标指针的作用不仅仅只是表明当前用户即将操作的位置，更重要的是，它也能提示用户即将执行的动作，是移动？还是提示？是点击？还是禁止点击？这时候，鼠标指针的交互和用户的体验息息相关，那么我们该如何使用合适的鼠标指针来提升网页的交互体验呢？下面大冰块来介绍一下这些 css内建的鼠标指针：

截至css3，内建的鼠标指针已有33个，基本上能满足我们所有的业务场景，它们的属性及其效果图如下所示：

禁用状态的提示

也许你还在用disabled来表示按钮的禁用，但实际上，cursor: not-allowed; 才是正确的禁用标志。

首先我们来建立一个普通按钮。

    <button style="
        padding: 15px 35px;
        margin: 200px;
        background-color: beige;
        font-size: 22px;" 
    >按钮</button>
复制代码

如下图：

使用disabled之后，

    <button style="
        padding: 15px 35px;
        margin: 200px;
        background-color: beige;
        font-size: 22px;" 
        disabled>按钮</button>
复制代码

如下图：
GIF 2021-6-6 21-40-28.gif

使用cursor: not-allowed; 之后，

    <button style="
        padding: 15px 35px;
        margin: 200px;
        background-color: beige;
        font-size: 22px;
        cursor: not-allowed;
    ">按钮</button>
复制代码

如下图：
GIF 2021-6-6 21-38-43.gif

禁用鼠标指针只是css鼠标指针样式的一部分，还有很多鼠标样式也是我们经常会使用的，比如：隐藏鼠标指针。

隐藏鼠标指针

现在前端能做的东西越来越多，比如医院的公共信息查询台界面，比如购票界面，公共交通椅背的看板等等。这些都可以用前端的技术实现，但是如果如果我们没有把鼠标指针隐藏，这些界面就会出现一个小鼠标箭头，这会给用户带来很差的体验。再比如，播放视频全屏的时候，鼠标指针也应该被隐藏，只有在进度条那一块才会显示出来。

鼠标指针的隐藏其实只要用到一个属性 cursor: none 即可，为了保证兼容性，我们可以再引入一个 1*1 的透明GIF图片 none.gif ，然后加一个属性 cursor: url('none.gif') 即可。如下代码：

首先我们来建立一个盒子，盒子区域内鼠标指针隐藏。

    <div style="
        width: 200px;
        height: 150px;
        background-color: beige;
        cursor: url('none.gif');
        cursor: none" 
    >鼠标隐藏区域</div>
复制代码

如下图：

GIF 2021-6-6 22-00-25.gif

扩大鼠标点击区域

很多时候，用户需要点击的按钮被设计的很小，比如关闭按钮，放大缩小按钮等，因为这些按钮如果被设计的很大，那么看起来就会很丑。这种情况下，用户点击范围应该比看到的范围要大，才能带来最好的用户体验，没有人愿意对着一个小按钮尝试点击很多下。

说起可点击区域，不得不提一下 Fitts法则：

Fitts法则是由美国心理学家Paul Fitts于1954年首次提出的。Fitts法则认为，人类移动到某个目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数。如果要用数学公式把它表达出来，通常就是：

T表示所需时间，D是从起点到目标中心的距离，W是目标区域的宽度，而a和b都是常数。

根据这个公式，我们可以很容易得知： 即使距离相同，目标越大，也越容易到达 。而小按钮必定是不易点击，与用户体验相悖的。

那么我们该如何解决这个问题呢？比如现在我们有一个 20px*20px 的按钮，但是我们需要点击范围是 40px*40px。如下：

    <style>
        div{
            width: 20px;
            height: 20px;
            background-color: #666;
            cursor: pointer;
        }
    </style>
    <div></div>
复制代码

如下图：

GIF 2021-6-6 22-21-34.gif

可以看到，鼠标点击范围只有 20px*20px，为了扩展点击范围，我们首先想到的是给这个元素加一个边框，让我们看一下，真的能实现吗？

    <style>
        div{
            width: 20px;
            height: 20px;
            border: 10px solid transparent;
            background-color: #666;
            cursor: pointer;
        }
    </style>
    <div></div>
复制代码

如下图：

GIF 2021-6-6 22-23-36.gif

我们发现，边框把按钮撑大了，这是因为默认情况下，背景会延申至边框，所以边框虽然透明，却变成了原先设置的颜色，看起来撑大了。

这时候，我们可以用 background-clip 属性来把背景限制在内容区域，不延申到边框。

    <style>
        div{
            width: 20px;
            height: 20px;
            border: 10px solid transparent;
            background-clip: padding-box;
            background-color: #666;
            cursor: pointer; 
        }
    </style>
    <div></div>
复制代码

如下图：

GIF 2021-6-6 22-29-43.gif

成功了，但是我们不能再次使用边框了，如果我们这个元素还需要使用边框的时候，我们可能就需要使用 box-shadow 来重新做一个假的边框了。

这样做起来，对以后的拓展来说是很不利的，所以我们需要一个更简单方便的方法来实现扩大鼠标点击区域，那就是伪元素，伪元素也可以实现和当前元素相同的交互效果。

    <style>
        div{
            width: 20px;
            height: 20px;
            background-color: #666;
            cursor: pointer;
            position: relative;
        }
        div::before{
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            bottom: -10px;
            left: -10px;
        }
    </style>
    <div></div>
复制代码