如何使CSS伪元素区域可点击？ [英] How to make the area of CSS pseudo-element clickable?

问题描述

以下是 FIDDLE 可供玩耍。

Here's the FIDDLE for play around.

我创建了< div class = foo> 并使用生成了CSS内容。 foo：after 。

我想通过设置链接使生成的内容可点击。

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.

如果我包装了 .foo 与锚点一起在 .foo 和 .foo：after <之后创建链接/ code>。

但是我想使 .foo：的区域在之后可单击，但不是 .foo 本身。

If I wrap the .foo with an anchor it creates a link around .foo and .foo:after.
However I want to make the area of .foo:after clickable, but not the .foo itself.

有没有一种方法可以使用纯CSS做到这一点？ 是否可能更改标记？

Is there a way that I can achieve this using pure CSS? Perhaps changing the markup?

HTML

<div class="container">
    <a href="http://example.com">
        <div class="foo"></div>
    </a>
</div>

CSS

.foo{
    width: 400px;
    height: 150px;
    background-color: #DFBDE0;
}

.foo:after{
    content: "";
    position: absolute;
    background-color: #CB61CF;
    width: 100px;
    height: 100px;
    right: 0;
}

Screeshot

推荐答案

我确认matchboxhero提出的解决方案，并且我也与Roberrrt息息相关。

I confirm the fix suggested by matchboxhero, and I share the concern of Roberrrt.

因此，我建议移动特殊班级

Hence I suggest moving your special class to the itself, or better still apply it to the outer container.

换句话说，您可以在本身获得特殊类的元素上创建特定的行为（foo ）或其子元素。但不是父级，前一个/后继兄弟或其他任何对象...：

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.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>

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