élément enfant Accès par rapport au contenu généré par

Question

Disons que je HTML comme ceci:

<div class="foo"> 
    <div>Stuff</div> 
</div> 

Et certains CSS comme ceci:

.foo > div { display: none; } 
.foo:after { /* rules */ } 

Je voudrais pouvoir faire quelque chose comme

.foo:after:hover > div { display: block; } 

pour que l'utilisateur passe la souris sur l'élément de contenu généré et affiche l'enfant div. Est-ce que quelqu'un sait comment faire ça? Mes tentatives jusqu'ici ont été infructueuses. Merci.

Answer 1

Cette question semble être à l'opposé de Can I target a :before or :after pseudo-element with a sibling combinator?

Dans votre cas, vous ne pouvez pas appliquer les pseudo-classes à pseudo-éléments. Cela signifie également que vous ne pouvez pas choisir d'appliquer des styles uniquement lorsqu'un pseudo-élément est sur :hovermais pas son élément générateur. Au lieu de cela, vous ne pouvez sélectionner un pseudo-élément qu'en fonction des états de pseudo-classe de son élément générateur, et uniquement lorsque cet élément générateur est l'objet du sélecteur.

De même, comme mentionné, les pseudo-éléments ne font pas partie du DOM.Par conséquent, de la même façon dont vous ne pouvez pas atteindre pseudo-éléments par rapport aux vrais enfants dans le même élément de production comme indiqué dans ma réponse à la question ci-dessus (explication dans le lien ci-dessus):

a[href^="http"] img ~ :after 

Vous ne pouvez pas sélectionner des éléments réels relativement aux pseudo-éléments dans le même élément de production:

.foo:after > div 

donc, pour résumer, la raison pour laquelle le sélecteur suivant ne fonctionnera pas:

.foo:after:hover > div 

est double:

1. pseudo-éléments ne peuvent pas avoir des états pseudo-classe, ce qui rend :after:hover invalide.

2. Le sujet du sélecteur ici n'est pas .foo, mais div, donc :after ne peut pas appliquer à .foo. Par conséquent, tenter de sélectionner un élément réel comme sujet d'un sélecteur après avoir appliqué un pseudo-élément à un autre sélecteur n'a pas de sens.

Si vous devez vraiment pas afficher votre div sur .foo:hover, mais sur un autre élément enfant, votre seule façon de contourner cela sans l'aide de JavaScript est de faire un autre élément réel sous .foo qui vient avant le div (non après):

<div class="foo"> 
    <div></div> 
    <div>Stuff</div> 
</div> 

En effet, there is no previous sibling selector; le sélecteur de frères et soeurs à côté, que vous pouvez utiliser à la place de :after > est seulement pour sélectionner le frère suivant:

.foo > div:first-child + div { display: none; } 
.foo > div:first-child { /* rules */ } 
.foo > div:first-child:hover + div { display: block; } 

Answer 2

Vous ne pouvez pas interagir avec le contenu généré, car il n'est pas présent dans le DOM (il peut être accédé, mais, jusqu'à présent, il est en lecture seule); la seule option que vous avez est d'utiliser :hover sur .foo lui-même:

.foo:hover > div { } 

Vous pouvez, bien sûr, le style du contenu différemment généré sur :hover:

.foo:hover::after { } 

Mais, je pense, que isn probablement » t une partie de ce que vous voulez faire.

Aussi, votre sélecteur comme écrit: .foo:after:hover > div je pense, essayerait de styler le div enfant du contenu généré; ce qu'il ne peut pas avoir.

Answer 3

Vous étiez proche. Il suffit de laisser tomber la partie après.

http://jsfiddle.net/QERPq/

MISE À JOUR: http://jsfiddle.net/QERPq/2/ En gros, cela dit que lorsque vous passez la souris sur ce point, pour sélectionner l'élément suivant (* = catchall) et l'afficher.

Answer 4

Essayez cette solution: http://jsfiddle.net/QERPq/4/.

Ce peut être ou ne pas être ce que vous recherchez.

HTML:

<div class="foo">pre-hover stuff</div> 

CSS:

.foo > div { 
    display: none; 
    font-size: 200px; 
} 
.foo:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 100px; 
    height: 20px; 
    background: yellow; 
} 
.foo:hover:after { 
    display: block; 
    content: 'Stuff'; 
    width: 40px; 
    height: 40px; 
    background: red; 
}