解决伪类元素‘after‘或者‘before‘遮挡父元素,导致鼠标移入或点击等事件不生效的问题

第一种调整css的index值

如果对显示没有影响的话,可以这么做

第二种设置css属性:pointer-event:none

原理是:
对一个元素设置 pointer-events: none,能让浏览器在处理鼠标操作时,忽视掉这个元素的存在,直接「穿透」到点击区域背后的元素上。

意味着直接在这个元素上做鼠标操作时
该元素上的鼠标效果不会被处理,例如 hover 效果
该元素上的鼠标事件不会被响应,例如 click、mousein、mousedown 事件

可以参考文章:认识 CSS pointer-events 属性

备注:
伪元素不能添加事件,因为他们不是DOM元素,无法响应

你可能感兴趣的:(css3)