欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css怎么换鼠标样式

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

鼠标样式常见的如箭头或小手形状,除此之外,我们可以根据我们自身的要求,使用Css中cursor属性来更改鼠标光标的外观。

Css怎么换鼠标样式

推荐学习:《CSS教程

下面我们就给大家介绍鼠标光标的不同样式。

代码如下:

<!DOCTYPE>
<Html>
<meta charset="utf-8">
<head>
    <title></title>
</head>
<body>
<a href=# style=cursor:crosshair;>十字准线</a><hr>
<a href=# style=cursor:text;> text </a><hr>
<a href=# style=cursor:wait;>等待的形状</a><hr>
<a href=# style=cursor:move;>移动的形状</a><hr>
<a href=# style=cursor:help;>帮助的形状</a><hr>
<a href=# style=cursor:default;>默认的形状</a><hr>
<a href=# style=cursor:hand;>小手状</a>
</body>
</Html>

上述代码,大家可以复制到本地进行测试,当鼠标悬停在每个超链上,就会显示更改不同的光标样式。

十字线样式:


sz.jpg

文本编辑时样式:

Css怎么换鼠标样式

等待样式:

Css怎么换鼠标样式

移动样式:

2018-12-03_141515.jpg

帮助样式:

2018-12-03_141532.jpg

默认箭头样式:

2018-12-03_141546.jpg

小手样式:

2018-12-03_141557.jpg

cursor 属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

本篇文章就是关于Css鼠标光标样式的简单介绍,希望对需要的朋友有所帮助! 本文地址:http://itbyc.com/web/css3/19784.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1