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