鼠标样式（css）

最新推荐文章于 2024-03-21 00:33:28 发布

无忧#

最新推荐文章于 2024-03-21 00:33:28 发布

阅读量2.7k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52473454/article/details/121273775

版权

来说一下css中15种鼠标样式。

以下代码可以直接使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
	</head>
	<body>
<style>
  span.a{ cursor:crosshair; }
  span.b{ cursor:default; }
   span.c{ cursor:auto; }                    /*auto   和 text  箭头相等*/
   span.d{ cursor:pointer; }
  span.e{ cursor:e-resize; }                /*:e-resize   和:w-resize  箭头相等*/
  span.f{ cursor:ne-resize; }                /*:ne-resize   和:sw-resize  箭头相等*/
  span.g{ cursor:nw-resize; }                  /*:nw-resize   和:se-resize  箭头相等*/
  span.h{ cursor:n-resize; }
   span.i{cursor:se-resize; }
   span.j{ cursor:sw-resize; }
   span.k{ cursor:w-resize; }
      span.l{ cursor:text; }
  span.m{ cursor:help; }
  span.n{ cursor:wait; } 
  span.o{ cursor:not-allowed; } 
</style>
<span class="a">a鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span><br/>
<span class="b">b鼠标移动到这段文字上，就看到鼠标样式变成了箭头</span><br/>
<span class="c">c鼠标移动到这段文字上，就看到鼠标样式变成了I</span><br/>
<span class="d">d鼠标移动到这段文字上，就看到鼠标样式变成了手势</span><br/>
<span class="e">e鼠标移动到这段文字上，就看到鼠标样式变成了水平箭头</span><br/>
<span class="f">f鼠标移动到这段文字上，就看到鼠标样式变成了右斜杠箭头</span><br/>
<span class="g">g鼠标移动到这段文字上，就看到鼠标样式变成了左斜杠箭头</span><br/>
<span class="h">h鼠标移动到这段文字上，就看到鼠标样式变成了垂直箭头</span><br/>
<span class="i">i鼠标移动到这段文字上，就看到鼠标样式变成左斜杠箭头</span><br/>
<span class="j">j鼠标移动到这段文字上，就看到鼠标样式变成右斜杠箭头</span><br/>
<span class="k">k鼠标移动到这段文字上，就看到鼠标样式变成水平箭头</span><br/>
<span class="l">l鼠标移动到这段文字上，就看到鼠标样式变成了l</span><br/>
<span class="m">m鼠标移动到这段文字上，就看到鼠标样式变成了箭头加问号</span><br/>
<span class="n">n鼠标移动到这段文字上，就看到鼠标样式变成了等待圈圈</span><br/>
<span class="o">o鼠标移动到这段文字上，就看到鼠标样式变成了禁止</span><br/>
	</body>
</html>

无忧#

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标样式（css）

来说一下css中15种鼠标样式。以下代码可以直接使用。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>练习</title> </head> <body><style> span.a{ cursor:crosshair; } span.b{ cursor:default; } span.c
复制链接

扫一扫