javascript - 在 jQuery 中只选择整个 css 类的一个 div

Question

我的目标是在 div 悬停时在该 div 上显示叠加层。普通的 div 称为 .circleBase.type1，overlay 是 circleBase.overlay。我的页面上有多个这样的 div。当我将鼠标悬停在一个 .cirlceBase.type1 上时，覆盖显示在每个 .circleBase.type1 上。我该如何防止这种情况？

这是一些代码:

HTML

<div class="circleBase type1">
    <p class="hidetext">Lorem ipsum</p>
    <hr size="10">
    <strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
   <p class="date">11/12/14</p>
</div>

和jQuery

$(document).ready(function(){
    $('.overlay').hide();
    $('.date').hide();

    $(".circleBase.type1").mouseenter(function(){
        $(".overlay").fadeIn("fast");
        $('.date').show();
        $('.hidetext').hide();
    });

    $(".overlay").mouseleave(function(){
        $(this).fadeOut("fast");
        $('.date').hide();
        $('.hidetext').show();
    });
});

Answer 1

使用$(this) 获取当前元素引用并像这样:

$(".circleBase.type1").mouseenter(function(){
    $(this).next(".overlay").fadeIn("fast");
    $(this).next(".overlay").find('.date').show();
    $(this).find('.hidetext').hide();
});

和:

$(".overlay").mouseleave(function(){
        $(this).fadeOut("fast");
        $(this).find('.date').hide();
        $(this).prev(".circleBase").find('.hidetext').show();
    });