jquery - 仅针对一个元素的悬停效果，而不影响具有相同类的其他 div

Question

这可能是一件容易的事，但我有点迷失了，这是漫长的一天。无论如何，我有一些 div，每个都有不同的大小，并且对于每个不同的大小，它都有自己的类。

<div class="LARGE">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

<div class="SMALL">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

<div class="LARGE">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

<div class="MEDIUM">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

在悬停时，我希望首先切换一个 ACTIVE 类。在活动时，我通过 CSS 删除 CONTENT 并将 HOVER CONTENT 显示为块。

<div class="LARGE ACTIVE">
    <div class="Content"></div>
    <div class="HOVER_CONTENT"></div>
</div>

我遇到的问题是，如果我将鼠标悬停在第二个 LARGE 上，则 HOVER CONTENT 会显示在第一个 LARGE 上。我只希望它显示在我悬停的 LARGE div 上。

$('.HOVER_CONTENT').hide();

$('.LARGE').hover(function () {
    $(this).toggleClass('active');
    $('.HOVER_CONTENT').toggle();
});

Answer 1

你只需要上下文：

$('.LARGE').hover(function () {
    $(this).toggleClass('active');
    $('.HOVER_CONTENT', this).toggle(); //adds context
});

或者：

$('.LARGE').hover(function () {
    $(this).toggleClass('active').find('.HOVER_CONTENT').toggle();
});

不需要大写字母，这只是 IMO 的错误形式。