web-dev-qa-db-ja.com

CSS疑似要素の領域をクリック可能にする方法は？

これが[〜＃〜] fiddle [〜＃〜]で遊んでいます。

<div class="foo">を作成し、.foo:afterを使用してCSSコンテンツを生成しました。
リンクを設定して、生成されたコンテンツをクリックできるようにしたい。

.fooをアンカーでラップすると、.fooと.foo:afterの周りにリンクが作成されます。
しかし、.foo:afterの領域はクリック可能にするが、.foo自体はクリック可能にしたくない。

純粋なCSSを使用してこれを実現する方法はありますか？ おそらくマークアップを変更しますか？

[〜＃〜] 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;
}

スクリーショット

enter image description here

htmlcsspseudo-element
21
aniskhan001

Matchboxheroによって提案された修正を確認し、Roberrrtの懸念を共有します。

したがって、私はあなたの特別なクラスをそれ自体に移動することをお勧めします。

つまり、特別なクラス（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>
5
user110357

これは機能するはずです。リンクがクリック可能になるのを停止しますが、pointer-events属性を使用して疑似要素でそれを許可します。

a {
  pointer-events: none;
}

.foo:after{
    pointer-events: all;
}

すべてのリンクに影響しないように、リンクにクラスを配置する必要があります。

4
matchboxhero

クリッカブルアイテムを::アフターとして作成する理由はありますか？

そうでない場合、回避策はアンカーを.fooの後に置くことです。 'position：absolute'を維持すると、アンカーがコンテナーdivにまだあるため、:: afterアイテムと同じ位置になります。

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

更新されたフィドル： http://jsfiddle.net/wagor93h/3/ 。

このようにして、foo divのpointersイベントが発生する可能性があります。 （たとえば、テキストの場合、どれも選択できないのは最適ではありません）

2
Salix