前端，css图片穿透，不响应任何鼠标事件或触摸事件

pointer-events 属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。pointer-events的常见值auto：元素可以正常接收鼠标事件（默认值）。none：元素不会响应任何鼠标事件或触摸事件，所有指针事件都会被忽略。等：这些值更多是 SVG 场景中的特定用法。：这些值适用于 SVG 元素，用来控制元素的填充区域和描边区域是否响应指针事件。

pointer-events 是一个蛮有趣的 CSS3 屬性，雖然主要是針對 SVG ，但其中幾個屬性應用在 div 上也是頗有意思。顧名思義，這是一個針對滑鼠事件的屬性，默认值为：auto，若值為 none，則可以穿透该元素，点击到下方的元素。除了 auto 與 none，其他都是控制 SVG 的屬性，若採用預設值，則 SVG 就是以 visiblePainted 來表現举例，如下代码：</</.yboxbackgroundrgba;margin;z-index;.gbox。

纯使用CSS的属性pointer-events，设置其为none (默认为auto)

一、pointer-events:none是？ pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用 理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto” 类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的...

是 CSS3 中的一个属性，主要用于控制元素是否响应鼠标或触摸事件。当元素的 pointer-events 属性被设置为 none 时，该元素及其子元素将无法与鼠标或触摸设备产生交互作用，即无法触发事件。可以在一个元素上设置 pointer-events: none，然后在它的子元素上绑定事件，这样鼠标交互会直接在子元素上触发事件，跳过中间元素。在一个元素的子元素上设置 pointer-events: none，可以防止点击事件穿透到父层元素上。在一个元素上覆盖一个透明的层，同时禁用用户对下面元素的操作。

http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/ pointer-events:auto|noneauto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。none——元素...

实现效果如图所示： 具体代码如下： <!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能 --> <template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="

是处理复杂交互层的利器，合理使用可实现：✅ 非阻塞式覆盖层✅ 自定义光标/装饰元素✅ 性能优化但需注意避免滥用，确保关键功能仍可通过其他方式访问（如键盘导航）！

pointer-events 语法： pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all 默认值：auto 适用于：所有元素 继承性：有 动画性：否 计算值：指定值 取值： auto： 与pointer-events属性未...

当 pointer-events 设置为 none 时,当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。换句话说,pointer-events: none 可以让一个元素无法响应用户输入事件,而保持原有的其他行为(如影响布局)。实现视差滚动效果。通过 pointer-events: none 使滚动层无法响应交互,实现粘性效果。实现遮罩层。pointer-events: none 可以使下层元素无法响应事件,产生遮蔽遮罩的效果。修复点击穿透问题。

* 关键！避免干扰实际点击 *//* 通过JS跟随鼠标移动 */});就像给元素施加了"事件隐身术"，在复杂交互场景中尤为实用。合理使用这个特性，可以创造出更流畅、更精细的用户体验。但切记：能力越大责任越大，不要滥用哦！

最近做一个案例演示的时候，遇到个小问题。要获取鼠标相对标签（为了方便称呼，我们叫它parent标签）的坐标，当然要用到event.offsetX和event.offsetY。 不过，如果鼠标移动到（也可以是点击）parent的子标签（称呼它child）后，就尴尬了，event.offsetX 和 event.offsetY 就不再是相对 parent 的坐标了，而是相对 child的坐标。 举...

如果为某个元素样式设置了“pointer-events: none”，事件、连接、悬浮样式都没有了 如果为a标签设置了“pointer-events: none”，点击a标签，不会跳转到链接地址，而且也没有悬浮样式，但是通过tab键可以选中连接进行跳转，可以把href去掉，这样就不能选中了 我写了一个div（X）和一个超链接（链接百度），我通过定位把他们放到了同一个地方，div...