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

Tout d'abord, je suppose que c'est trop complexe pour CSS3, mais si il y a une solution, quelque part, j'aimerais aller à la place.

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>

L'enfant div est fixé à display:none; par défaut, mais alors display:block; lorsque la souris survole le div parent. Le problème est que cette balise apparaît à plusieurs endroits sur mon site, et je veux seulement que l'enfant sera affiché que si la souris est au-dessus de la mère, et non pas si la souris est au-dessus de tout les autres parents (ils ont tous le même nom de classe et aucune Id).

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");
        });

InformationsquelleAutor Hartley Brody | 2011-02-21

228

Pourquoi ne pas simplement utiliser le CSS?
```
.parent:hover .child, .parent.hover .child { display: block; }
```
puis ajouter JS pour IE6 (à l'intérieur d'un commentaire conditionnel, par exemple) qui ne prend pas en charge :placez correctement:
```
jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});
```
Voici un exemple rapide: Violon
- ce code ne fonctionne pas pour moi. est-il censé dire ".parent.hover" et non pas ".parent:hover"?? cas, je n'ai jamais vu ce que vous avez avant. et n'a pas une virgule indiquent plusieurs sélecteurs de prendre les mêmes styles? je ne vois pas comment cela aide ici. un peu plus d'infos sur CSS, por favor 0=]
- :hover est celui de la "Dynamique des pseudo-classes", définies par le CSS2 (voici les spec). Voici un petit exemple: http://jsfiddle.net/5FLr4/. il fonctionne pour moi.
- ahh merci beaucoup! j'ai effectivement eu un certain positionnement relatif qui était de pousser l'enfant de texte en dehors de la vue... doh! >.< j'apprécie l'aide!
- Apparemment cela ne fonctionne pas pour .enfant::-webkit-scrollbar-thumb si vous souhaitez modifier le point culminant de la barre de défilement à l'intérieur de l'élément enfant.
- .parent:not(:hover) .child { display: none; } semble bien fonctionner pour moi, si je ne suis pas inquiet sur IE6. Mais de cette façon, je peux l'utiliser sur des éléments que je ne veux pas avoir un uniforme display de la propriété.
InformationsquelleAutor Stephen
129

Pas besoin d'utiliser le JavaScript ou jquery, CSS est assez:
```
.child{ display:none; }
.parent:hover .child{ display:block; }
```
VOIR DÉMO
- +1 Grande réponse!! Juste ce que le médecin a ordonné.
- c'est la bonne réponse
- fonctionne comme un charme!!
InformationsquelleAutor Ali Adravi
8

Utilisation toggleClass().
```
$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
```
où color est la classe. Vous pouvez définir le style de la classe que vous le souhaitez pour obtenir le comportement que vous souhaitez. L'exemple montre comment la classe est ajouté et retiré à la souris dans et hors.

Vérifier exemple de Travail ici.

InformationsquelleAutor Hussein

.parent:hover > .child {
    /*do anything with this child*/
}

InformationsquelleAutor Amir Rahman

J'ai ce que je pense est une meilleure solution, car il est adaptable à plusieurs niveaux, autant que voulu, pas seulement deux ou trois.

- Je utiliser des frontières, mais il peut également être fait avec whateever style voulu, comme couleur d'arrière-plan.

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

Ont une autre couleur de la bordure seulement un div, la div sur lequel la souris est, pas sur n'importe quel parent, non pas sur un enfant, de sorte qu'il peut être vu que de telles div frontière dans une couleur différente, tandis que le reste demeure sur 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>

InformationsquelleAutor z666zz666z

Stephen réponse est correct, 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 travail sur à jsFiddle.

InformationsquelleAutor Roger Roelofs

1

Si vous utilisez Twitter Bootstrap style et de la base de JS pour un menu déroulant:
```
.child{ display:none; }
.parent:hover .child{ display:block; }
```
C'est la pièce manquante pour créer collant-des listes déroulantes (qui ne sont pas ennuyeux)
- Le comportement est de:
  1. Rester ouverte lorsque l'utilisateur clique dessus, fermer en cliquant à nouveau n'importe où ailleurs sur la page
  2. Se fermer automatiquement lorsque la souris fait défiler le menu et les éléments.
InformationsquelleAutor R Tobin
1

Ne sais pas si c'est terrible de raisons de le faire ou pas, mais il semble pour travailler avec moi sur la dernière version de Chrome/Firefox sans aucun visibles des problèmes de performances avec pas mal d'éléments sur la page.
```
*:not(:hover)>.parent-hover-show{
display:none;
}
```
Mais de cette façon, vous n'avez besoin que d'appliquer parent-hover-show à un élément et le reste est pris en charge, et vous pouvez garder ce que par défaut le type d'affichage que vous voulez sans être toujours "à bloc" ou de faire plusieurs classes pour chaque type.

InformationsquelleAutor Brian Leishman

De changer de css, vous n'avez même pas besoin de mettre l'enfant en classe

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

InformationsquelleAutor hamboy75

Vous devez vous connecter pour publier un commentaire.

Vérifier exemple de Travail ici.

HTML

CSS

jQuery