web-dev-qa-db-fra.com

Comment rendre la zone du pseudo-élément CSS cliquable?

Voici le VIOLON pour jouer.

J'ai créé <div class="foo"> et avoir un contenu CSS généré à l'aide de .foo:after.
Je souhaite que ce contenu généré soit cliquable en définissant un lien.

Si j'enveloppe le .foo avec une ancre crée un lien autour de .foo et .foo:after.
Cependant, je veux faire la zone de .foo:after cliquable, mais pas le .foo lui-même.

Existe-t-il un moyen d'y parvenir en utilisant du CSS pur? Peut-être changer le balisage?

[~ # ~] 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;
}

Capture d'écran

enter image description here

htmlcsspseudo-element
21
aniskhan001

Je confirme la correction suggérée par matchboxhero et je partage l'inquiétude de Roberrrt.

Par conséquent, je suggère de déplacer votre classe spéciale vers elle-même, ou mieux de l'appliquer au conteneur extérieur.

En d'autres termes, vous créez le comportement spécifique soit sur l'élément qui obtient lui-même la classe spéciale (foo), soit sur ses éléments enfants. Mais pas le parent, ni le frère précédent/suivant, ou quoi que ce soit d'autre ...:

.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

Cela devrait fonctionner, cela empêche le lien d'être cliquable mais l'autorise ensuite sur le pseudo-élément en utilisant l'attribut pointer-events.

a {
  pointer-events: none;
}

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

Vous devez mettre une classe sur le lien afin qu'il n'affecte pas tous les liens.

4
matchboxhero

Y a-t-il une raison pour que l'élément cliquable soit créé comme :: après?

Parce que, sinon, une solution serait de mettre votre ancre après .foo à la place. Garder la 'position: absolu' lui donne la même position que votre :: after item puisque l'ancre est toujours dans le conteneur div.

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

un violon mis à jour: http://jsfiddle.net/wagor93h/3/ .

De cette façon, l'événement pointeurs sur la div foo peut toujours se produire. (si c'est du texte, par exemple, ne pas pouvoir en sélectionner ne serait pas optimal)

2
Salix