指针浮动的元素样式
.box:hover{
background-color: red;
}
1
2
3
:hover 必须位于 :link 和 :visited 之后才能生效
样式：
cursor 属性规定要显示的光标的类型
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer 光标呈现为指示链接的指针
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右移动。
ne-resize此光标指示矩形框的边缘可被向 上及向右移动
nw-resize此光标指示矩形框的边缘可被向 上及向左移动
n-resize 此光标指示矩形框的边缘可被向上移动
se-resize此光标指示矩形框的边缘可被向 下及向右移动
sw-resize此光标指示矩形框的边缘可被向 下及向左移动
s-resize 此光标指示矩形框的边缘可被向下移动
w-resize 此光标指示矩形框的边缘可被向左移动
text 此光标指示文本。
wait 此光标指示程序正忙
help 此光标指示可用的帮助
实践代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实践</title>
</head>
<style>
*{
list-style: none;
}
.default:hover{
cursor: default;
}
.auto:hover{
cursor: auto;
}
.crosshair:hover{
cursor: crosshair;
}
.pointer:hover{
cursor:pointer;
}
.move:hover{
cursor: move;
}
.e-resize:hover{
cursor: e-resize;
}
.ne-resize:hover{
cursor: ne-resize;
}
.nw-resize:hover{
cursor: nw-resize;
}
.n-resize:hover{
cursor: n-resize;
}
.se-resize:hover{
cursor: se-resize;
}
.sw-resize:hover{
cursor: sw-resize;
}
.s-resize:hover{
cursor: s-resize;
}
.w-resize:hover{
cursor: w-resize;
}
.text:hover{
cursor: text;
}
.wait:hover{
cursor: wait;
}
.help:hover{
cursor: help;
}
</style>
</head>
<ul>
<h1>实践代码</h1>
<li class="default">这是箭头</li>
<li class="auto">竖直线</li>
<li class="crosshair">十字型</li>
<li class="pointer">手指型</li>
<li class="move">可移动十字形</li>
<li class="e-resize">横杠</li>
<li class="ne-resize">边缘可被向上右移动</li>
<li class="nw-resize">边缘可被向上向左移动</li>
<li class="n-resize">边缘可被向上向下移动</li>
<li class="se-resize">边缘可被向上向下向右移动</li>
<li class="sw-resize">边缘可被向上向下向左移动</li>
<li class="s-resize">边缘可被向下移动</li>
<li class="w-resize">边缘可被向左移动</li>
<li class="text">文本光标</li>
<li class="wait">圆圈</li>
<li class="help">鼠标旁边有问号</li>
</body>
</html>
浙公网安备 33010602011771号