Html 如何使 CSS 伪元素的区域可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25465397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the area of CSS pseudo-element clickable?
提问by aniskhan001
Here's the FIDDLEfor play around.
这是用于玩耍的FIDDLE。
I have created <div class="foo">and have a generated CSS content using .foo:after.
I want to have that generated content clickable by setting a link.
我已经<div class="foo">使用.foo:after.
我希望通过设置链接使生成的内容可点击。
If I wrap the .foowith an anchor it creates a link around .fooand .foo:after.
However I want to make the area of .foo:afterclickable, but not the .fooitself.
如果我.foo用锚包裹 ，它会在.foo和周围创建一个链接.foo:after。
但是我想让.foo:after点击区域，而不是它.foo本身。
Is there a way that I can achieve this using pure CSS? Perhaps changing the markup?
有没有办法使用纯 CSS 来实现这一点？也许改变标记？
HTML
HTML
<div class="container">
<a href="http://example.com">
<div class="foo"></div>
</a>
</div>
CSS
CSS
.foo{
width: 400px;
height: 150px;
background-color: #DFBDE0;
}
.foo:after{
content: "";
position: absolute;
background-color: #CB61CF;
width: 100px;
height: 100px;
right: 0;
}
Screeshot
截图
回答by matchboxhero
This should work, it stops the link being clickable but then allows it on the pseudo element using the pointer-events attribute.
这应该可以工作，它会停止链接可点击，但随后使用 pointer-events 属性在伪元素上允许它。
a {
pointer-events: none;
}
.foo:after{
pointer-events: all;
}
You should put a class on the link so that it doesn't affect all links.
您应该在链接上放置一个类，以便它不会影响所有链接。
回答by user110357
I confirm the fix suggested by matchboxhero, and I share the concern of Roberrrt.
我确认了 matchboxhero 建议的修复，并且我和 Roberrrt 一样关注。
Hence I suggest moving your special class to the itself, or better still apply it to the outer container.
因此，我建议将您的特殊类移到它本身，或者最好还是将它应用于外部容器。
In other words, you create the specific behaviour either on the element that itself gets the special class (foo), or child elements thereof. But not the parent, or preceding/following sibling, or whatever else...:
换句话说，您可以在本身获得特殊类 (foo) 的元素或其子元素上创建特定行为。但不是父母，或之前/之后的兄弟姐妹，或其他任何……：
.foo.container{
width: 550px;
position: relative;
}
.foo a div {
width: 400px;
height: 150px;
background-color: #DFBDE0;
}
.foo a div:after{
content: "";
position: absolute;
background-color: #CB61CF;
width: 100px;
height: 100px;
right: 0;
}
.foo a {
pointer-events: none;
}
.foo a div:after{
pointer-events: all;
}<div class="foo container">
<a href="http://example.com">
<div></div>
</a>
</div>回答by Salix
Is there a reason for the clickable item to be made as an ::after?
是否有理由将可点击项目制作为 ::after？
Because, if not, a work around would be to put your anchor after .foo instead. Keeping the 'position: absolute' gives it the same position as your ::after item since the anchor is still in the container div.
因为，如果没有，解决方法是将您的锚点放在 .foo 之后。保持 'position: absolute' 使其与您的 ::after 项目具有相同的位置，因为锚点仍在容器 div 中。
<div class="container">
<div class="foo"></div>
<a class="after" href="http://example.com">CLICK ME !</a>
</div>
an updated fiddle: http://jsfiddle.net/wagor93h/3/.
更新的小提琴：http: //jsfiddle.net/wagor93h/3/。
That way, the pointers event on the foo div can still happen. (if it's text, for say, not being able to select any of it wouldn't be optimal)
这样，foo div 上的指针事件仍然可能发生。（例如，如果是文本，则无法选择其中任何一个都不是最佳选择）
