Comment faire un effet de survol pour les pseudo éléments?

Question

J’ai une configuration de ceci:

et ceci pour CSS :

Existe-t-il un moyen de donner au pseudo élément un effet de survol tel que et est-il également possible de faire planer le pseudo-élément en réponse à un autre élément plané comme ça: ? CSS seulement serait bien, mais aussi jQuery est bien aussi.

Answer 1

Vous pouvez modifier le pseudo-élément en fonction du survol du parent :

JSFiddle DÉMO

<div class="snippet" data-hide="true" data-lang="js"> <div class="snippet-code snippet-currently-hidden">

</div></div>

Answer 2

Pour clarifier, vous NE POUVEZ PAS donner à un pseudo élément. Il n’y a rien de tel que dans CSS à partir de 2018.

Answer 3

`` changera le pseudo-élément en réponse au survol du bouton. Si vous voulez faire quelque chose de non trivial au pseudo-élément seulement, cependant, vous feriez mieux de mettre un élément réel dans votre HTML. Les pseudo-éléments sont plutôt limités.

Bien que CSS ne vous permette pas de styliser les éléments en fonction des éléments qui les poursuivent, il est généralement possible de truquer quelque chose avec le même effet de base en mettant :hover sur un nœud parent, c’est-à-dire :

Answer 4

Si c’est juste à des fins de conception, je pense qu’il est préférable de créer des pseudo-éléments de chaque côté de la boîte rectangle et de garder le HTML aussi simple que possible:

HTML:

CSS:

J’ai modifié le CSS et le résultat peut être vu ci-dessous:

http://jsfiddle.net/a3ehz5vu/