CSS HTML Style Cursor Pointer

发布时间：2023-05-12

一、指针变化

在网页开发过程中，指针的变化很常见，如当鼠标悬停在图片上时，鼠标指针会变为手型，或者当鼠标悬停在链接上时，鼠标指针会变为小手形状。 CSS提供了一种简便的方法来实现指针变化，即使用 cursor 属性。cursor 属性可用于定义在鼠标移到某元素之上时所显示的光标形状。cursor 属性可使用如下值：

cursor:auto; /* 默认光标 */
cursor:default; /* 默认光标 */
cursor:none; /* 隐藏光标 */
cursor:context-menu; /* 上下文菜单（通常是小箭头） */
cursor:help; /* 帮助光标（通常是问号加小箭头） */
cursor:pointer; /* 小手光标 */
cursor:progress; /* 进度条（通常是小手加等待图标） */
cursor:text; /* 文本光标（通常是一根竖线） */
cursor:wait; /* 等待光标（通常是转圈的小圆点） */

以下是一个例子：

<style>
  .myButton { 
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; /* 小手光标 */
  }
</style>
<button class="myButton">点击我</button>

二、自定义光标

除了使用已有的光标形状外，CSS还可以允许我们自定义光标，只需指定自己定义的图片即可。例如：

<style>
  .myCursor {
    cursor: url('myCursor.png'), auto;
  }
</style>
<p class="myCursor">这是一段鼠标指针为自定义图片的文本</p>

三、小结

通过 cursor 属性，我们可以很方便地实现指针变化，并且可以自定义光标形状，可以为网页增加更丰富的视觉效果。

推荐文章