web-dev-qa-db-fra.com

Changer le CSS de l'élément enfant lorsque le parent est survolé

Tout d'abord, je suppose que c'est trop complexe pour CSS3, mais s'il y a une solution quelque part, j'aimerais bien l'utiliser avec cela.

Le code HTML est assez simple.

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

La division enfant est configurée pour afficher: aucune; par défaut, mais change ensuite pour afficher: block; lorsque la souris survole le div parent. Le problème est que ce balisage apparaît à plusieurs endroits sur mon site et je ne veux que l'enfant soit affiché si la souris est au-dessus de son parent, et non si l'un des autres parents est survolé (ils ont tous la même classe nom et pas d'identifiant).

J'ai essayé d'utiliser $(this) et .children() en vain.

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });
jquerycssjquery-selectorsparent
137
Hartley Brody

Pourquoi ne pas utiliser simplement CSS?

.parent:hover .child, .parent.hover .child { display: block; }

puis ajoutez JS pour IE6 (dans un commentaire conditionnel par exemple) qui ne prend pas en charge: survolez correctement:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Voici un exemple rapide: Fiddle

221
Stephen

Pas besoin d’utiliser JavaScript ou jquery, CSS suffit:

.child{ display:none; }
.parent:hover .child{ display:block; }

VOIR LA DÉMO

126
Ali Adravi

Utilisez toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

où color est la classe. Vous pouvez styliser la classe à votre guise pour obtenir le comportement souhaité. L'exemple montre comment la classe est ajoutée et supprimée à l'entrée et à la sortie de la souris.

Cochez Exemple de travail ici .

8
Hussein
.parent:hover > .child {
    /*do anything with this child*/
}
5
Amir Rahman

J'ai ce que je pense être une meilleure solution, puisqu'elle est extensible à plusieurs niveaux, autant que souhaité, pas seulement deux ou trois.

J'utilise des bordures, mais cela peut aussi être fait avec le style souhaité, comme la couleur de fond.

Avec la frontière, l’idée est de:

  • Avoir une couleur de bordure différente seulement une div, la div sur où la souris est, pas sur n'importe quel parent, pas sur n'importe quel enfant, ainsi on peut voir que cette frontière div dans une couleur différente tandis que le reste reste en blanc.

Vous pouvez le tester à: http://jsbin.com/ubiyo3/13

Et voici le code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>
3
z666zz666z

La réponse de Stephen est correcte mais voici mon adaptation de sa réponse:

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Vous pouvez voir cet exemple en train de travailler sur jsFiddle . 

2
Roger Roelofs

Si vous utilisez Twitter Bootstrap styling et base JS pour un menu déroulant:

.child{ display:none; }
.parent:hover .child{ display:block; }

C'est la pièce manquante pour créer des listes déroulantes collantes (qui ne sont pas gênantes)

  • Le comportement est de:
    1. Restez ouvert lorsque vous cliquez dessus, fermez-le lorsque vous cliquez à nouveau ailleurs sur la page.
    2. Fermer automatiquement lorsque la souris sort des éléments du menu.
1
R Tobin

Pour changer de css, vous n'avez même pas besoin de définir la classe enfant.

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
0
hamboy75

Je ne suis pas sûr qu'il y ait de terribles raisons de le faire ou non, mais cela semble fonctionner avec la dernière version de Chrome/Firefox, sans aucun problème de performance visible avec de nombreux éléments sur la page.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Mais de cette façon, tout ce dont vous avez besoin est d’appliquer parent-hover-show à un élément, le reste est pris en charge et vous pouvez conserver le type d’affichage par défaut de votre choix sans qu'il soit toujours "bloqué" ou créé plusieurs classes pour chaque type.

0
Brian Leishman