• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-05-07 20:30:23原创292

    方法:只需用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>

    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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery有几个基本选择器 下一篇:jquery中有map方法吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery怎么隐藏tr一行• jquery怎么监听textarea值是否改变• jquery怎么增加一个元素• jquery怎么查找隐藏的元素• jquery中replaceall方法怎么用
    1/1

    PHP中文网