Trước hết, tôi cho rằng điều này quá phức tạp đối với CSS3, nhưng nếu có một giải pháp ở đó ở đâu đó, tôi rất muốn đi với điều đó thay vào đó.
HTML khá đơn giản.
<div class="parent">
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<div class="child">
Text Block 2
</div>
</div>Div con được đặt để hiển thị: none; theo mặc định, nhưng sau đó thay đổi để hiển thị: block; khi chuột được di chuột qua div cha. Vấn đề là đánh dấu này xuất hiện ở một số nơi trên trang web của tôi và tôi chỉ muốn con được hiển thị nếu chuột vượt qua nó là cha mẹ chứ không phải nếu chuột vượt qua bất kỳ cha mẹ nào khác (tất cả chúng đều có cùng một lớp tên và không có ID).
Tôi đã thử sử dụng $(this)và .children()vô ích.
$('.parent').hover(function(){
$(this).children('.child').css("display","block");
}, function() {
$(this).children('.child').css("display","none");
});