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

前言

大多数人可能不知道，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>

如下图：

使用cursor: not-allowed; 之后，

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

如下图：

禁用鼠标指针只是 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>

如下图：

扩大鼠标点击区域

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

说起可点击区域，不得不提一下 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>

如下图：

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

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

如下图：

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

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

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

如下图：

成功了，但是我们不能再次使用边框了，如果我们这个元素还需要使用边框的时候，我们可能就需要使用 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>

如下图：

基于伪元素实现的方式更加灵活方便，我们甚至可以把鼠标点击区域设置为 任意的尺寸位置或者形状，甚至脱离元素原先的位置， 并且它不会影响当前元素的其它效果。

后记

鼠标交互作为最常见的交互方式，反而是最容易被忽视的，通过本文的尝试与实现，相信你对鼠标指针以及点击区域的交互也有了更深的了解。在开发过程中，细节往往能体现出一个人的思维方式，前端作为与用户交互的重要环节，类似于鼠标指针这样的要注意的细节还有很多。

本文旨在提供 css 鼠标交互相关的思路，如果对你有帮助，点个赞就好，如果有错误欢迎指出交流。感谢阅读~