Utiliser: survoler pour modifier les css d'une autre classe?
y a-t-il un moyen de modifier la css pour une classe lorsque l'on plane sur un élément d'une autre classe en utilisant uniquement la css ?
quelque Chose comme:
.item:hover .wrapper { /*some css*/ }
seul ' wrapper 'n'est pas dans' item', c'est ailleurs.
Je ne veux vraiment pas utiliser javascript pour quelque chose d'aussi simple, mais si je le dois, comment le ferais-je ? Voici ma tentative ratée:
document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";
il n'y a qu'un élément de chaque classe. Je ne sais pas pourquoi ils n'ont pas utilisé de carte d'identité j'ai fait le modèle, mais c'est comme ça et je ne peux pas le changer.
[Edit]
c'est un menu. Chaque élément de menu a une classe distincte. Quand vous volez sur l'élément un sous-menu apparaît à droite. C'est comme une superposition, quand j'utilise L'outil 'Inspect Element' je peux voir que tout le html du site Web change quand le sous-menu est actif(ce qui signifie qu'il n'y a rien d'autre que le sous-menu). La classe j'appelle 'wrapper' a la css, qui contrôle l'arrière-plan du sous-menu. Il n'y a vraiment Je ne vois aucun lien entre les deux classes.
4 réponses
Il existe deux approches que vous pouvez prendre, pour avoir une planait élément affecter (E) un autre élément (F):
Fest un enfant de l'élémentFest un élément deE(Eapparaît dans le mark-up / DOM avantF):
Pour illustrer la première de ces options (F en tant que descendant / enfant de E):
.item:hover .wrapper {
color: #fff;
background-color: #000;
}
Pour démontrer la deuxième option, F être un élément frère de E:
.item:hover ~ .wrapper {
color: #fff;
background-color: #000;
}
Dans cet exemple, si .wrapper était un frère immédiat de .item (sans autres éléments entre les deux) vous pouvez aussi utiliser .item:hover + .wrapper.
Références:
ce n'est pas possible dans CSS pour le moment, sauf si vous voulez sélectionner un enfant ou un élément frère (trivial et décrit dans d'autres réponses ici).
pour tous les autres cas, vous aurez besoin de JavaScript. jQuery et les cadres comme Angular peuvent aborder ce problème avec une relative facilité.
[Edit]
avec le nouveau sélecteur CSS (4):a(), vous serez en mesure de cibler les éléments/classes de parents, ce qui rend une solution uniquement CSS viable dans un avenir proche!
Fourni .wrapper est à l'intérieur .et si vous n'êtes pas dans IE 6 ou .item est une étiquette de a, le CSS que vous avez devrait fonctionner très bien. Avez-vous des preuves que ce n'est pas le cas?
EDIT:
les CSS seuls ne peuvent pas affecter quelque chose qui n'y est pas contenu. Pour ce faire, formatez votre menu comme suit:
<ul class="menu">
<li class="menuitem">
<a href="destination">menu text</a>
<ul class="menu">
<li class="menuitem">
<a href="destination">part of pull-out menu</a>
... etc ...
et votre CSS, comme ceci:
.menu .menu {
display: none;
}
.menu .menuitem:hover .menu {
display: block;
float: left;
// likely need to set top & left
}
Vous pouvez le faire en faisant les CSS suivants. vous pouvez mettre ici le css dont vous avez besoin pour affecter la classe enfant en cas de vol stationnaire sur la racine
.root:hover .child {
}