Primeiro de tudo, estou assumindo que isso é muito complexo para CSS3, mas se houver uma solução em algum lugar, eu adoraria ir com isso.
O HTML é bastante direto.
<div class="parent">
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<div class="child">
Text Block 2
</div>
</div>
A div filho está configurada para exibir: none; por padrão, mas depois muda para display: block; quando o mouse está sobre o div principal. O problema é que essa marcação aparece em vários lugares do meu site, e eu só quero que o filho seja exibido se o mouse estiver sobre o pai, e não se o mouse estiver sobre qualquer um dos outros pais (todos têm a mesma classe nome e sem IDs).
Eu tentei usar $(this)
e .children()
sem sucesso.
$('.parent').hover(function(){
$(this).children('.child').css("display","block");
}, function() {
$(this).children('.child').css("display","none");
});