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

159

Tout d'abord, je suppose que c'est trop complexe pour CSS3, mais s'il y a une solution quelque part, j'aimerais plutôt y aller.

Le 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>

Le div enfant est défini pour afficher: aucun; par défaut, mais change ensuite pour afficher: bloc; lorsque la souris survole le div parent. Le problème est que ce balisage apparaît à plusieurs endroits sur mon site, et je veux que l'enfant ne soit affiché que si la souris est sur son parent, et non si la souris est sur l'un des autres parents (ils ont tous la même classe nom et aucun 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");
        });
jquery css jquery-selectors parent Hartley Brody
la source

Réponses:

260

Pourquoi ne pas simplement utiliser 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

Stephen
la source
ce code ne fonctionne pas pour moi. est-il censé dire ".parent.hover" et non ".parent: hover" ?? cas je n'ai jamais vu ce que vous avez auparavant. et une virgule n'indique-t-elle pas plusieurs sélecteurs prenant les mêmes styles? je ne vois pas comment cela aide ici. un peu plus d'infos sur ce CSS, por favor 0 =]
Hartley Brody
6
:hoverest l'une des "pseudo-classes dynamiques" définies par CSS2 ( voici la spécification ). Voici un exemple rapide: http://jsfiddle.net/5FLr4/ . ça marche pour moi.
Lee
ahh merci beaucoup! En fait, j'avais un positionnement relatif qui poussait le texte de l'enfant hors de vue ... doh! >. <J'apprécie l'aide!
Hartley Brody
Apparemment, cela ne fonctionnera pas pour .child :: - webkit-scrollbar-thumb si vous voulez changer la surbrillance de la barre de défilement à l'intérieur de l'élément enfant.
thdoan
1
.parent:not(:hover) .child { display: none; }semble bien fonctionner pour moi, même si je ne suis certainement pas inquiet pour IE6. Mais de cette façon, je peux l'utiliser sur des éléments dont je ne veux pas avoir une displaypropriété uniforme .
Blair Connolly
147

Pas besoin d'utiliser le JavaScript ou jquery, CSS suffit:

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

VOIR LA DÉMO

Ali Adravi
la source
9

Utilisez toggleClass().

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

où colorest la classe. Vous pouvez styliser la classe comme vous le souhaitez pour obtenir le comportement souhaité. L'exemple montre comment la classe est ajoutée et supprimée lors de l'entrée et de la sortie de la souris.

Consultez l'exemple de travail ici .

Hussein
la source
7 
.parent:hover > .child {
    /*do anything with this child*/
}
Amir Rahman
la source
3

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 travailler sur jsFiddle .

Roger Roelofs
la source
3

J'ai ce que je pense être une meilleure solution, car elle est évolutive à plus de niveaux, autant que je le souhaite, pas seulement deux ou trois.

J'utilise des bordures, mais cela peut aussi être fait avec n'importe quel style, comme la couleur d'arrière-plan.

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

  • Avoir une couleur de bordure différente, un seul div, le div sur l'endroit où se trouve la souris, pas sur un parent, pas sur un enfant, de sorte qu'il ne peut être vu que cette bordure div dans une couleur différente tandis que le reste reste blanc.

Vous pouvez le tester sur: 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>
z666zz666z
la source
Cela ne fait pas ce que la question demandait. Cela modifie la bordure autour de l'élément survolé. Pas la bordure autour d'un élément enfant.
jenniwren
2

Si vous utilisez le style Twitter Bootstrap et le JS de base 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 ennuyeuses)

  • Le comportement consiste à:
    1. Restez ouvert lorsque vous cliquez dessus, fermez lorsque vous cliquez à nouveau n'importe où ailleurs sur la page
    2. Se ferme automatiquement lorsque la souris sort des éléments du menu.
R Tobin
la source
2

Je ne sais pas s'il y a de terribles raisons de le faire ou non, mais cela semble fonctionner avec moi sur la dernière version de Chrome / Firefox sans aucun problème de performance visible avec pas mal d'é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 et le reste est pris en charge, et vous pouvez conserver le type d'affichage par défaut que vous voulez sans qu'il soit toujours "bloc" ou en créant plusieurs classes pour chaque type.

Brian Leishman
la source
0

Pour le 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; }
hamboy75
la source