html中的鼠标样式,css 如何为html页面设置鼠标样式呢?

摘要:

下文讲述css为html页面设置鼠标样式的方法分享,如下所示:

在html页面中，我们经常看见各种各样的鼠标样式，如：等待形、手指形 那么这些形状是如何使用css脚本生成的呢？

实现思路:

使用css中cursor属性即可实现鼠标手的样式定义

cursor语法:

cursor:auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)

cursor常用样式说明:

1.div{ cursor:default }//缺省值---正常鼠标指针

2.div{ cursor:hand }和div{ cursor:text } //文本选择效果

3.div{ cursor:move } //移动选择效果

4.div{ cursor:pointer } //手指形状 链接选择效果

5.div{ cursor:url(url图片地址) } //设置对象为图片

例：

为div设置鼠标样式为移动形状

猫猫教程(www.maomao365.com)

---为div设置cursor设置移动形状

div{

height:130px;

line-height:130px;

width:260px;

cursor:move;

background-color:green;

color:white;

}

maomao365.com

当鼠标 放在Div中时，鼠标显示为移动形状

---

鼠标变为 移动形状