jquery怎么用CSS()设置鼠标禁止样式
- 青灯夜游原创
- 2022-05-07 20:30:231964浏览
方法：只需用CSS()将鼠标样式属性“cursor”的值设置为“not-allowed”即可，语法为“元素对象.css("cursor","not-allowed")”或“元素.css({"cursor":"not-allowed"})”。
本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。
想要设置鼠标禁止样式，只需用的cursor属性。
只需用CSS()将鼠标样式属性“cursor”的值设置为“not-allowed”即可。
设置语法有两种：
元素对象.css("cursor","not-allowed")
元素对象.css({"cursor":"not-allowed"})实现示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
// $("p").css("cursor","not-allowed");
$("p").css({"cursor":"not-allowed"});
});
});
</script>
</head>
<body>
<p>一个p元素，让鼠标移动到该元素上</p>
<button>设置鼠标禁止样式</button>
</body>
</html>
说明：
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
当cursor属性的属性值为“not-allowed”，则鼠标光标形状为禁止图案。
cursor属性取值如下，默认值为default
crosshair; |
十字准心 |
光标表现为十字准线 |
cursor: pointer; |
手 |
光标标以暗示(手指)的形式来表明有一个连接 |
cursor: wait; |
等待/沙漏 |
光标暗示当前程序正忙(一般为一块表或是一个沙漏) |
cursor: help; |
帮助 |
光标暗示当前位置可得到帮助(一般为问号或是气球) |
cursor: no-drop; |
无法释放 |
cursor: no-drop; |
cursor: text; |
文字/编辑 |
光标暗示当前所处位置为文字内容 |
cursor: move; |
可移动对象 |
光标暗示一些东西应该被移动 |
cursor: n-resize; |
向上改变大小(North) |
边缘可向上移动(北) |
cursor: s-resize; |
向下改变大小(South) |
边缘可向下方移动(南) |
cursor: e-resize; |
向右改变大小(East) |
box边缘可向右(东)边移动 |
cursor: w-resize; |
向左改变大小(West) |
边缘可向左移动(西) |
cursor: ne-resize; |
向上右改变大小(North East) |
光标暗示box的边缘可向右上方移动(东北方向) |
cursor: nw-resize; |
向上左改变大小(North West) |
边缘可向左上方移动(西北) |
cursor: se-resize; |
向下右改变大小(South East) |
边缘可向右下方移动(东南) |
cursor: sw-resize; |
向下左改变大小(South West) |
边缘可向左下方移动(西南) |
cursor: auto; |
自动 |
浏览器设置一个光标 |
cursor:not-allowed; |
禁止 |
cursor:not-allowed; |
cursor: progress; |
处理中 |
cursor: progress; |
cursor: default; |
系统默认 |
默认的光标状态（通常为一个箭头） |
cursor: url(' # '); |
用户自定义（可用动画） |
自定义光标的url位置 注意：在定义完自定义的光标之后在末尾加上一般性的光标，以防那些url所定义的光标不能使用 |
大家可能会说，cursor属性值这么多，怎么记呀？其实大家不用担心，在实际开发中，我们一般只用到“default”和“pointer”这两个属性值，其他的一般都很少用得上。如果实在没办法还需要其他的，那就回来查这种表就行了。
【推荐学习：jQuery视频教程、web前端开发】
以上是jquery怎么用CSS()设置鼠标禁止样式的详细内容。更多信息请关注PHP中文网其他相关文章！