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就是坏形式。

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

1 个答案: