鼠标的指针状态 以及 事件禁用

<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<!-- 光标 -->
<span style="cursor:auto">auto</span><br>
<!-- 十字 -->
<span style="cursor:crosshair">crosshair</span><br>
<!-- 默认 -->
<span style="cursor:default">default</span><br> 
<!-- 左右      -->
<span style="cursor:e-resize">e-resize</span><br>
<!-- 箭头+小问号 -->
<span style="cursor:help">help</span><br>
<!-- 移动,上下左右 -->
<span style="cursor:move">move</span><br>
<!-- 上下 -->
<span style="cursor:n-resize">n-resize</span><br>
<!-- 左下+右上 -->
<span style="cursor:ne-resize">ne-resize</span><br>
<!-- 左上+右下 -->
<span style="cursor:nw-resize">nw-resize</span><br>
<!-- 手 -->
<span style="cursor:pointer">pointer</span><br>
<!-- 加载 -->
<span style="cursor:progress">progress</span><br>
<!-- 上下 -->
<span style="cursor:s-resize">s-resize</span><br>
<!-- 左上+右下 -->
<span style="cursor:se-resize">se-resize</span><br>
<!-- 左下+右上 -->
<span style="cursor:sw-resize">sw-resize</span><br>
<!-- 光标 -->
<span style="cursor:text">text</span><br>
<!-- 左右 -->
<span style="cursor:w-resize">w-resize</span><br>
<!-- 等待 -->
<span style="cursor:wait">wait</span><br>
补充:
cursor:no-drop //是一个红色的圈加一个斜杠,表示禁用的意思(:hover状态下的样式 依然 起作用)
cursor:not-allowed //是一个红色的圈加一个斜杠,表示禁用的意思(:hover状态下的样式 不 起作用)

禁用标签:一般<input>、<button>的功能禁用,浏览器带有默认样式
disabled="disabled"
禁用事件:标签上鼠标原有的事件不能实现
pointer-events:none

猜你喜欢

转载自www.cnblogs.com/MrZhujl/p/11428841.html