HTML5基础——16、CSS鼠标样式

最新推荐文章于 2025-11-25 10:09:48 发布

原创最新推荐文章于 2025-11-25 10:09:48 发布 · 177 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #计算机外设 #鼠标样式

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5。
这里学习一下怎样改变网页的鼠标样式。

一、自带的鼠标样式

先看例子：

<body>
  <a href="www.baidu.com" target="_blank" title="百度" id="baidu">百度</a>
  <br />
  <br />
  <a href="www.google.com" target="_blank" title="谷歌" id="google">谷歌</a>
  <br />
  <br />
  <a href="www.sina.com" target="_blank" title="新浪" id="sina">新浪</a>
</body>

这时候显示的是：
当鼠标没有移动到超链接上面时，是一个小白箭头。
在这里插入图片描述

当鼠标移动到超链接上面时，显示的是一个小手。
在这里插入图片描述

假如我不喜欢这样的默认鼠标样式，想修改一下。

  <style>
    * {
      cursor: pointer;
    }

    #baidu {
      cursor: move;
    }

    #google {
      cursor: not-allowed;
    }

    #sina {
      cursor: text;
    }
  </style>

这时候：
在鼠标没有在超链接上面时，会显示小手
在这里插入图片描述

鼠标悬浮在百度上面时，会显示移动图标
在这里插入图片描述

鼠标悬浮在谷歌上面时，会显示禁止图标
在这里插入图片描述

鼠标悬浮在新浪上面时，会显示文字输入的图标。
在这里插入图片描述

这里主要用到的是cursor属性，它的取值有：
default：默认的小白箭头
pointer：白色小手
move：移动图标
text：文本输入图标
not-allowed：禁止图标
wait：加载中转圈
help：带问号的指针
crosshair：大十字瞄准指针

二、自定义鼠标图片

除了用自带的鼠标图片样式以外，还可以自己指定，比如

  <style>
    * {
      cursor: url(./img/arr105.png), auto;
    }

    #baidu {
      cursor: url(./img/arr109.png), auto;
    }
  </style>
</head>

<body>
  <a href="www.baidu.com" target="_blank" title="百度一下" id="baidu">百度</a>
</body>