Avec le HTML suivant, lorsque je survole sur l'enfant, je reçois un fond vert sur le parent. Comment puis-je arrêter cela de se produire? Je veux le fond vert si je plante à l'extérieur de l'élément enfant.
CSS3 est bien. P>
p>
<div class="parent"> <div class="child">Child</div> </div>
5 Réponses :
La chose la plus facile à faire peut être d'utiliser JS pour ce type de CSS. Peut-être que vous pouvez essayer de repenser votre mise en œuvre. Pourquoi essayez-vous de faire quelque chose comme ça?
J'ai un grand arbre d'éléments et certains d'entre eux répondront à un clic de souris. Je veux seulement que l'élément qui réponde au clic pour être mis en surbrillance. Faire cela dans JavaScript signifie un style basé sur la sourisovation / la mouse et fera beaucoup de bruit à la base du code.
Il ne va pas bouffer le codeBase - il s'agira d'environ 4 à 5 lignes de code, si vous utilisez jQuery. En pseudocode: $ ('. Parent'). Hover (fonction () {... Set CSS sur vert ...}); $ ('. Enfant'). Verser (fonction () {this.parent.css (.. Set CSS sur blanc ..});
Ce n'est pas possible avec CSS de vanille plaine. Vous demandez une pseudo-classe d'un enfant ( Ceci peut certainement être fait en utilisant JavaScript. enfant: survol ) pour affecter la déclaration Déclaration d'un parent. Il n'y a aucun moyen de spécifier ce genre de chose en utilisant des CSS régulières.
Je ne suis pas convaincu que cela ne peut pas être fait avec CSS. Je pense que je veux en quelque sorte changer .Parent: survoler uniquement s'il n'y a pas d'éléments enfants qui ont survolé. De cette façon, l'enfant n'affectera pas la déclaration des parents, le sélecteur parent serait plutôt plus perspicace.
Non; C'est précisément ce que les concepteurs CSS ont exclu. Il devient presque impossible de coder, de spécification et d'utiliser ce type de modèle. Dans XPATH, il est possible d'utiliser un sélecteur parent, mais il n'y a pas de pseudo-éléments et de classes à s'inquiéter de là. C'était une décision difficile pour eux, mais vous ne pouvez pas Utiliser CSS pour permettre aux enfants de sélectionner les sélecteurs d'enfants pour affecter le parent.
C'est donc vraiment moche, mais ça marche (genre de). Je crée fondamentalement un duplicata de parent comme frère d'enfant. Le parent-écrivain est masqué par défaut, puis affiché sur la survolée de l'enfant. Chrome n'aime pas si vous utilisez le sélecteur + au lieu du sélecteur ~. Ce n'est pas très évolutif, mais cela peut fonctionner.
Comme les autres gars postés, JavaScript serait probablement une meilleure solution. P>
p>
<style>
.parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
.parent:hover { background-color: green; }
.child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
.child:hover { background-color: blue; }
.parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
.child:hover ~ .parent-overwrite { display: block; }
</style>
<div class="parent">
<div class="child">Child</div>
<div class="parent-overwrite"></div>
</div>Merci d'avoir essayé :) mais ya, à cause de l'évolutivité cela ne fonctionnera pas pour moi.
Hahaha merci, c'était un problème amusant de résoudre. J'ai totalement rencontré ce même problème auparavant, mais je pense que ma solution était de changer manuellement la classe sur le parent qui n'avait pas de déclaration de survolte. Cela ne fonctionnerait pas pour vous cependant parce que vous vouliez que le vol stationnaire sur votre parent fonctionne toujours. Mon programmeur a pensé que j'allais devenir sévèrement voté pour ce piratage laid et laid. Merci de lui prouver le tort;)
Je ne peux faire que cela en ajoutant un balisage supplémentaire. Une dividélisation vide doit être ajoutée qui fonctionne essentiellement en tant que fond parent. Jetez un coup d'œil à la CSS ici.
J'ai ce que je pense, c'est une meilleure solution, car il est évolué à plus de niveaux, autant que je voulais, pas seulement deux ou trois.
J'utilise des frontières, mais cela peut également être fait avec le style recherché, comme de la couleur de fond.
avec la frontière, l'idée est de:
Vous pouvez le tester à: http://jsbin.com/ubiyo3/13
et voici le code: