首页 > web前端 > 前端问答 > jquery怎么用CSS()设置鼠标禁止样式

jquery怎么用CSS()设置鼠标禁止样式

青灯夜游
发布: 2022-05-07 20:30:23
原创
1993 人浏览过

方法:只需用CSS()将鼠标样式属性“cursor”的值设置为“not-allowed”即可,语法为“元素对象.css("cursor","not-allowed")”或“元素.css({"cursor":"not-allowed"})”。

jquery怎么用CSS()设置鼠标禁止样式

本教程操作环境: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>
登录后复制

1.gif

说明:

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

当cursor属性的属性值为“not-allowed”,则鼠标光标形状为禁止图案。

cursor属性取值如下,默认值为default

crosshair;

十字准心

光标表现为十字准线

cursor: pointer;                     
cursor: hand;                    
写两个是为了照顾IE5,它只认hand。

光标标以暗示(手指)的形式来表明有一个连接

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(' # ');                    
# = 光标文件地址      (注意文件格式必须为:.cur 或 .ani)。

用户自定义(可用动画)

自定义光标的url位置           

注意:在定义完自定义的光标之后在末尾加上一般性的光标,以防那些url所定义的光标不能使用

大家可能会说,cursor属性值这么多,怎么记呀?其实大家不用担心,在实际开发中,我们一般只用到“default”和“pointer”这两个属性值,其他的一般都很少用得上。如果实在没办法还需要其他的,那就回来查这种表就行了。

【推荐学习:jQuery视频教程web前端开发

以上是jquery怎么用CSS()设置鼠标禁止样式的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板