您的位置：首页 > Web前端 > CSS

css关于鼠标样式的设置

2017-04-26 00:00 387 查看
CSS有一个属性：cursor，其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

auto默认（自适应）

text文本

hand手型

pointer手型

help带有问好的箭头

progress正在加载

move移动十字

no-drop不能放下

not-allowed禁止标记

wait等待

row-resize垂直拉伸

col-resize水平拉伸

vertical-text垂直文本

crosshair十字准心的箭头

n-resize上下的箭头（上）

s-resize上下的箭头（下）

w-resize左右的箭头（左）

e-resize左右的箭头（右）

ne-resize右上左下的箭头（右上）

sw-resize右上坐下的箭头（左下）

nw-resize左上右下的箭头（左上）

se-resize左上右下的箭头（右下）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li style="cursor:auto"><span>auto默认（自适应）</span></li>
<li style="cursor:text"><span>text文本</span></li>
<li style="cursor:hand"><span>hand手型</span></li>
<li style="cursor:pointer"><span>pointer手型</span></li>
<li style="cursor:help"><span>help带有问好的箭头</span></li>
<li style="cursor:progress"><span>progress正在加载</span></li>
<li style="cursor:move"><span>move移动十字</span></li>
<li style="cursor:no-drop"><span>no-drop不能放下</span></li>
<li style="cursor:not-allowed"><span>not-allowed禁止标记</span></li>
<li style="cursor:wait"><span>wait等待</span></li>
<li style="cursor:row-resize"><span>row-resize垂直拉伸</span></li>
<li style="cursor:col-resize"><span>col-resize水平拉伸</span></li>
<li style="cursor:vertical-text"><span>vertical-text垂直文本</span></li>
<li style="cursor:crosshair"><span>crosshair十字准心的箭头</span></li>
<li style="cursor:n-resize"><span>n-resize上下的箭头（上）</span></li>
<li style="cursor:s-resize"><span>s-resize上下的箭头（下）</span></li>
<li style="cursor:w-resize"><span>w-resize左右的箭头（左）</span></li>
<li style="cursor:e-resize"><span>e-resize左右的箭头（右）</span></li>
<li style="cursor:ne-resize"><span>ne-resize右上左下的箭头（右上）</span></li>
<li style="cursor:sw-resize"><span>sw-resize右上坐下的箭头（左下）</span></li>
<li style="cursor:nw-resize"><span>nw-resize左上右下的箭头（左上）</span></li>
<li style="cursor:se-resize"><span>se-resize左上右下的箭头（右下）</span></li>
</ul>
<style type="text/css">
li{
margin: 15px auto;
width: 300px;
list-style: none;
text-align: center;
line-height: 5ex;
background-color: #FAF0E6;
color:#5E2612;
}
</style>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 鼠标
相关文章推荐
新的分享
章节导航