web-dev-qa-db-fra.com

Pouvez-vous appliquer un effet de survol CSS à un élément qui n’est pas un enfant de l’élément survolé?

Je n'étais pas sûr si cela est possible ou non. Je travaille actuellement dans des animations CSS3 et je dois survoler un lien qui affectera un autre élément div (non-enfant) de la page. Je n'étais pas sûr s'il y avait un travail autour ou pas.

<style type="text/css">

#header {
 background-color:red;
}

#header:hover .element {
 background-color:blue;
}

.element {
 background-color:green;
}

</style>

-

<header id="header">
     <li><a href="#">Hover</a></li>
</header>

<div class="element" >
 <p>hello world </p>
</div>
csshtmlhoverbackground-color
23
WilliamB

Comme il s'agit de frères et soeurs adjacents, vous pouvez utiliser le sélecteur frère/soeur adjacent : +.

#header:hover + .element {
 background-color:blue;
}

Ceci est bien pris en charge dans la plupart des navigateurs modernes *. IE7 peut être buggé. IE6 et inférieur ne le supporte pas.

* Une des autres réponses mentionne le sélecteur de frères et sœurs général, qui ne fonctionne pas dans Webkit lorsqu'il est utilisé avec une pseudo-classe dynamique telle que :hover en raison de ce bogue . Notez que ce même bogue causera des problèmes dans Webkit si vous essayez d'empiler des sélecteurs frères adjacents avec une pseudo-classe dynamique. Par exemple, #this:hover + sibling + sibling ne fonctionnera pas dans Webkit.

24
stevelove

Il y a le sélecteur général de frères et soeurs _ (~) qui sélectionne les éléments frères.

Ainsi, avec le code HTML que vous avez publié, #header:hover ~ .element sélectionnerait <div class="element"> lorsqu’il est un frère ultérieur de l’en-tête survolé.

Même IE 7 le supporte }, vous êtes donc sur un terrain relativement solide.

16
Paul D. Waite

En ce qui concerne le bug du kit de sélection de frères et soeurs, cet article propose une solution de contournement css:

http://css-tricks.com/webkit-sibling-bug/

Citant:

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Ci-dessus crée une animation sur la page et cela semble résoudre le problème comme par magie. Ce qui précède peut être ajouté directement au fichier css principal ou à une feuille de style de création de kit Web uniquement pour accompagner votre hacks.

Je recommanderais à la feuille de style Webkit uniquement quelque chose comme:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:0)" href="webkit.css"/>

car il le cache des autres navigateurs et peut être plus facilement supprimé à l'avenir une fois le bogue corrigé.

2
rjc730

Malheureusement, cela ne fonctionnera que si votre classe .element est comprise dans l'élément .bgchange. C'est la nature de la cascade: vous ne pouvez pas (via CSS uniquement) affecter des éléments DOM qui sont structurellement/hiérarchiquement séparés les uns des autres.

1
Phil.Wheeler