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

我的目标是在div悬停时显示该div上的覆盖。普通div称为

.circleBase.type1

，覆盖为

circleBase.overlay

。我的页面上有多个这样的div。当我将鼠标悬停在一个

.cirlcbase.type1

上时，覆盖显示在每个

.cirlebase.type1

上。我如何防止这种情况

下面是一些代码：

HTML

---

通常，当我想针对某个特定的对象时，您只需给它一个ID

ID在JavaScript中的表现比类更好

如果您有一个特定的容器，那么使用该容器作为起点也是一个不错的选择

$('#container').find('.something.type1').doSomething();

这对于jquery来说效率更高，因为它只搜索#容器内部的.something.type1。

使用

$（This）

获取当前元素引用，并执行以下操作：

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

<div class="circleContainer">
    <div class="circleBase">
        <p>Lorem ipsum</p>
        <hr>
        <strong class="gray">gdroel</strong>
    </div>
    <div class="overlay" style="display: none;">
       <p class="date">11/12/14</p>
    </div>
</div>

$(function(){
    $(".circleContainer").mouseenter(function(){
        $(this).find(".overlay")
        $(this).find('.circleBase').hide();
    });

    $(".circleContainer").mouseleave(function(){
        $(this).find('.circleBase').show();
        $(this).find(".overlay").hide();
    });
});

以及：

---

我不确定你到底想做什么，但看起来你想用悬停文本替换某个圆圈中的内容，但要淡入淡出。要做到这一点，您必须添加一些CSS，最好也更改HTML结构

HTML应该如下所示：

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

<div class="circleContainer">
    <div class="circleBase">
        <p>Lorem ipsum</p>
        <hr>
        <strong class="gray">gdroel</strong>
    </div>
    <div class="overlay" style="display: none;">
       <p class="date">11/12/14</p>
    </div>
</div>

$(function(){
    $(".circleContainer").mouseenter(function(){
        $(this).find(".overlay")
        $(this).find('.circleBase').hide();
    });

    $(".circleContainer").mouseleave(function(){
        $(this).find('.circleBase').show();
        $(this).find(".overlay").hide();
    });
});

---

这包括一些CSS，以使其更好。尝试将其取出并运行，您将立即看到问题。

将

事件

传递到

鼠标指针

和

鼠标移动

，然后查看

事件.目标

是否帮不上忙。看到了吗，你只是想让叠加显示悬停？是否正确？@williamukoh

此

将为您提供当前元素引用，该元素引用生成的事件并非全部使用“circleBase”类