Changer le CSS de l'élément enfant lorsque le parent est en vol stationnaire
tout d'abord, je suppose que c'est trop complexe pour CSS3, mais s'il y a une solution quelque part, j'adorerais aller avec ça à 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 l'enfant d'être affiché si la souris est sur son parent, et pas si la souris est sur l'un des autres parents (ils ont tous le même nom de classe et pas D'IDs).
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");
});
9 réponses
pourquoi ne pas simplement utiliser CSS?
.parent:hover .child, .parent.hover .child { display: block; }
et ensuite ajouter JS pour IE6 (dans un commentaire conditionnel par exemple) qui ne supporte pas: hover correctement:
jQuery('.parent').hover(function () {
jQuery(this).addClass('hover');
}, function () {
jQuery(this).removeClass('hover');
});
voici un exemple rapide: violon
pas besoin d'utiliser le JavaScript ou jquery, CSS suffit:
.child{ display:none; }
.parent:hover .child{ display:block; }
utiliser toggleClass() .
$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
où color est la classe. Vous pouvez modeler la classe comme vous voulez pour obtenir le comportement que vous voulez. L'exemple montre comment la classe est ajouté et retiré à la souris dans et hors.
Vérifier exemple de Travail ici .
.parent:hover > .child {
/*do anything with this child*/
}
j'ai ce que je pense est une meilleure solution, car il est adaptable à plusieurs niveaux, autant que voulu, pas seulement deux ou trois.
j'utilise des bordures, mais cela peut aussi être fait avec n'importe quel style voulu, comme la couleur de fond.
Avec la frontière, l'idée est de:
- ont une couleur de bordure différente une seule div, la div over où la souris est, pas sur un parent, pas sur un enfant, de sorte qu'il peut être vu seulement une telle 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>
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 plus à jsFiddle .
si vous utilisez Bootstrap Twitter style 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 collant-des listes déroulantes (qui ne sont pas ennuyeux)
- le comportement est de:
- rester ouvert en cliquant, Fermer en cliquant ailleurs sur la page
- se ferme automatiquement lorsque la souris sort des éléments du menu.
pour le changer de css vous n'avez même pas besoin de définir la classe de l'enfant
.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
Je ne suis pas sûr qu'il y ait des raisons terribles de le faire ou non, mais il semble fonctionner avec moi sur la dernière version de Chrome/Firefox sans aucun problème de performance visible avec beaucoup d'éléments sur la page.
*:not(:hover)>.parent-hover-show{
display:none;
}
mais de cette façon, tout ce que vous avez besoin est d'appliquer parent-hover-show à un élément et le reste est pris en charge, et vous pouvez garder n'importe quel type d'affichage par défaut que vous voulez sans qu'il soit toujours" bloquer " ou faire des classes multiples pour chaque type.