Css中cursor:pointer的作用(鼠标指针变小手)

已于 2024-05-11 15:14:43 修改
阅读量779 收藏
点赞数 2
文章标签： css 前端
于 2023-12-14 18:04:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y2960018173/article/details/135001336
版权

cursor:pointer的作用（鼠标指向的样式）

<div style="cursor: pointer;"></div>

cursor : 网页浏览时用户鼠标指针的样式或图形形状。
属性值：
default：默认光标（默认是一个箭头）
auto：默认，浏览器设置的光标
crosshair：光标为十字线
pointer：光标为一只手
move：光标为某对象可移动
text：光标指示文本
wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

not-allowed：光标显示为禁用

蓝白风铃草
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css的pointer鼠标类型详解(支持IE，firefox，chrome)
01-19
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 将它应用到一个元素 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面
css鼠标样式 cursor: pointer
uaena的博客
08-15 804
cursor: none; cursor:not-allowed; 禁止选择 user-select: none
解析CSS属性之pointer-events
随风丶逆风的博客
08-10 3902
今天接到一个给页面增加水印的需求。最开始使用绝对定位 position: absolute + z-index + opacity 方式实现了第一版，可以添加水印，但是鼠标事件的目标总是在水印容器元素上，无法复制水印下面的内容，体验非常差。遂在 github 上找到了watermark-dom包，使用简单，顺利完成了需求。 如果只是这样使用轮子，能力永远等不到增长，于是阅读了它的源码，除开一些通用化的接口和功能，核心思路和我的相同，但为啥他就可以操作水印下元素内容呢？最后发现其使用了 css 属性 poin
CSS3中pointer-events属性和cursor属性-使用案例
JackieDYH的博客
04-12 2388
pointer-events 属性定义元素是否对指针事件做出反应 属性: auto—效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。 none—元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。 JavaScript 语法：object.style.pointerEvents="n...
cursor:hand和cursor:pointer的区别（vue前端鼠标悬浮变小手）
青山不改，绿水长流。
12-13 1455
cursor:hand 与 cursor:pointer 的效果是一样的，都像光标指向链接一样，光标变成手形。向上右改变大小(North East) cursor: ne-resize;向上左改变大小(North West) cursor: nw-resize;向下右改变大小(South East) cursor: se-resize;向下左改变大小(South West) cursor: sw-resize;向上改变大小(North) cursor: n-resize;
cursor:pointer属性,鼠标经过或点击有小手样式
weixin_50255994的博客
10-15 2万+
cursor:pointer属性是在计算机中将光标呈现为指示链接的指针（一只手） 拓展:
cursor: pointer；
great_sz的博客
06-07 3543
是css的一个属性，用于设置鼠标指针在元素上的样式为手型。
CSS中cursor:pointer的作用
热门推荐
sx_lz_1119的博客
12-28 3万+
cursor:pointer的作用
CSS属性pointer-events
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
11-13 373
是一个CSS属性，它指定了在何种情况下（如鼠标点击、触摸事件等）可以作用到元素上。这个属性主要用于处理指针设备（如鼠标、触摸屏）的事件。这样，当鼠标悬停在图片上时，它会触发图片的鼠标事件，例如点击或触摸事件。而当鼠标悬停在容器上时，它不会触发任何鼠标事件。现在，如果你想让图片在鼠标悬停时接收鼠标事件（如点击），并且不希望父元素（容器）捕获这些事件，你可以使用。来让图片正常捕获指针事件。通过这样的设置，你可以控制哪些元素会响应指针事件，并确保正确的交互行为。来让容器不捕获指针事件，并使用。
CSS 中的pointer-event 属性
Lei2021_type的博客
04-13 1839
pointer-event:属性可以指定在什么情况下元素可以成为鼠标事件(也就是禁用掉当前以及子元素下面的所有事件) auto:默认值--对于svg元素，该值与visiblePainted效果相同 none:元素不会成为鼠标事件的target visiblePainted:只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标： visibility属性值：visible，且鼠标指针在元素内部，且fill属性值非none ..
cursor:hand与cursor:pointer的区别介绍
12-12
cursor:hand 与 cursor:pointer 的效果是一样的，都像光标指向链接一样，光标变成手行。...附：cursor属性收集 光标类型 CSS 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个
CSS cursor 属性 -- 鼠标指针样式效果
09-27
取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | ...
CSS cursor 属性 — 鼠标指针样式效果
12-12
取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-...复制代码代码如下:auto: 正常鼠标 crosshair: 十字鼠标 default: 默认鼠标 pointer: 点状鼠标 move: 移动鼠标
CSS中cursor属性的鼠标样式明细
09-25
CSS中cursor属性的鼠标样式有哪些？本文整理了一些，可供大家使用，感兴趣的朋友也可以参考下
css中position:relative和overflow:hidden之间的问题
09-25
在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不起作用，其实将父标签的position也设置成relative便可解决此问题
html中cursor的属性,cursor怎么用？CSS中cursor属性的使用方法以及可选值的解析
weixin_29822105的博客
06-04 1万+
在页面布局时，CSS是工作中必不可少的部分，常听别人讲：HTML是一个人素颜的样子，加了CSS后是一个人化妆以后的样子。这句话通俗易懂，很好的诠释了CSS与HTML之间的关系。CSS中的属性非常多，今天就着重讲一个属性，即CSS cursor属性，以及它的很多可选值，比如：cursor 手型 就是用的 cursor:pointer 这个属性。cursor怎么用？一、CSS cursor 基本语法c...
CSS cursor属性详解
ctf_0226的博客
07-13 1762
关于cursor属性 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状属性值 1、url：需要使用的自定义光标的URL 2、default：默认光标，通常是一个箭头 3、auto：默认，浏览器设置的光标 4、crosshair：光标呈现为十字线 5、pointer：光标呈现为一只手 6、move：指示某对象可以移动 7、e-resize：指示矩形框的边缘可被向右移动 8、ne-resiz...
CSS进阶 光标类型&设置遮罩
hangshao_123的博客
11-21 382
1. 光标设置 鼠标移动到元素上面，鼠标呈现的效果。 2. 有哪些光标 光标 效果 default 默认 pointer 小手-点击 text 工字形-文本 move 十字-移动 3. 应用 cursor: pointer; 常常用于a标签、logo，和点击功能结合 cursor: move; 鼠标经过，光标变成十字型，和移动功能结合 cursor: text; 鼠标经过，光标变成工字型，表示文本可以移动。 切记
cursor:pointer 什么意思?
diemi9921的博客
07-13 6472
cursor规则是设定网页浏览时用户鼠标指针的样式，也就是鼠标的图形形状cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式另外可以选择其他鼠标指针样式，常用的有default 箭头，crosshair 十字，progress 箭头和沙漏等等 转载于:https://www.cnblogs.com/XACOOL/p/56...
cursor: pointer换指针图片
06-08
如果您想将默认的指针样式更改为自定义的指针图片，只需要将CSS的cursor属性设置为"pointer"，并将指针图片的路径指定为url()函数的参数即可，例如： ``` <style> body { cursor: url('pointer.png'), pointer; } </style> ``` 在上面的代码中，我们将cursor属性设置为"pointer"，这意味着当前的光标样式为指针样式，然后使用url()函数将指针图片的路径指定为第一个参数，最后指定"pointer"作为备用的光标样式，以便当指定的图片无法加载时，浏览器会使用默认的指针样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值