伪元素不可点击 [英] Pseudo-element not clickable

问题描述

我已将箭头放置为：在可点击图块的伪元素之后。它创建了一个盲点，即使将高度/宽度设置为0，也无法点击。

代码如下： http://cdpn.io/vpjCg

要查看问题，请将光标移到平铺链接上，然后通过字符在右下角。

是否有CSS属性或其他解决方案将after元素设置为鼠标光标不可见，以便整个区域可点击？

解决方案

伪元素属于父母 - 如果其父母可点击（按钮， a ）那么伪元素也是如此。与DOM元素类似，如果DOM元素具有绑定的点击事件侦听器，则直接点击DOM元素或伪元素时会触发。

编辑

除了我的回答，您还可以让点击穿过一个元素，使用CSS属性 pointer-events 并将值设置为 none 。适用于各种现代浏览器（IE9及更高版本） https：// developer .mozilla.org / zh-CN / docs / Web / CSS / pointer-events

I've placed an arrow as an :after pseudo-element of a clickable tile. It creates a blind spot that is not clickable despite setting the height/width to 0.

Code here: http://cdpn.io/vpjCg

To see the issue, roll cursor over the tiled link, then over the character in the bottom-right corner.

Is there a CSS attribute or another solution to set the :after element as invisible to the mouse cursor so that the whole area is clickable?

解决方案

Pseudo elements belong to their parents - if their parent is clickable (button,a) then so will the pseudo element. Likewise with DOM elements, if a DOM element has a click event listener bound, it will be fired when you click directly on the DOM element, or on it's pseudo elements.

EDIT

In addition to my answer, you can make your clicks go "through" an element to hit underlying elements using the CSS property pointer-events and setting the value to none. Works in every modern browser (IE9 and up) https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

这篇关于伪元素不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！