web-dev-qa-db-fra.com

Utilisez: survolez pour modifier le CSS d'une autre classe?

Existe-t-il un moyen de modifier le CSS d'une classe lors du survol d'un élément d'une autre classe en utilisant uniquement le 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 dois le faire, comment pourrais-je le faire? 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 seul élément de chaque classe. Je ne sais pas pourquoi ils n'ont pas utilisé d'identifiants lors de la création du modèle, mais c'est comme ça et je ne peux pas le changer.

[Modifier]

C'est un menu. Chaque élément de menu a une classe distincte. Lorsque vous survolez l'élément, un sous-menu apparaît à droite. C'est comme une superposition, lorsque j'utilise l'outil "Inspecter l'élément", je peux voir que l'ensemble du code HTML du site Web change lorsque le sous-menu est actif (ce qui signifie qu'il n'y a que le sous-menu). La classe que j'appelle "wrapper" a le CSS qui contrôle l'arrière-plan du sous-menu. Il n'y a vraiment aucun lien que je puisse voir entre les deux classes.

javascriptcssclasshover
36
Kesarion

Ce n'est pas possible en CSS pour le moment, sauf si vous voulez sélectionner un élément enfant ou frère (trivial et décrit dans d'autres réponses ici).

Pour tous les autres cas, vous aurez besoin de JavaScript. jQuery et des frameworks comme Angular peut résoudre ce problème avec une relative facilité.

[Modifier]

Avec le nouveau sélecteur CSS (4) : has () , vous pourrez cibler les éléments/classes parents, rendant une solution CSS uniquement viable dans un avenir proche!

9
Kesarion

Vous pouvez adopter deux approches pour qu'un élément survolé affecte (E) un autre élément (F):

  1. F est un élément enfant de E, ou
  2. F est un élément ultérieur (ou descendant de frère) de E (en ce que E apparaît dans le balisage/DOM avant F):

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 illustrer la deuxième option, F étant 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 aucun autre élément entre les deux), vous pouvez également utiliser .item:hover + .wrapper.

JS Fiddle démonstration .

Les références:

67
David Thomas

À condition que .wrapper soit à l'intérieur de .item, et à condition que vous ne soyez pas dans IE 6 ou .item est une balise, le CSS que vous avez devrait fonctionner très bien. Avez-vous des preuves à suggérer ce n'est pas?

MODIFIER:

Le CSS seul ne peut pas affecter quelque chose qui ne s'y trouve pas. 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
}
5
robrich

Vous pouvez le faire en créant le CSS suivant. vous pouvez mettre ici le css dont vous avez besoin pour affecter la classe enfant en cas de survol sur la racine

.root:hover    .child {
   
}
3
Mohammad Gabr