Question

This is probably an easy one but I’m a little lost it’s been a long day. Anyway I have a sprinkle of divs each a different size and for every different size it has it’s own class.

<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>

On hover i’m looking to first toggle a class of ACTIVE. On active i’m removing CONTENT via CSS and displaying HOVER CONTENT as block.

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

Problem that I’m having is if I hover over the second LARGE the HOVER CONTENT displays on the first LARGE. I only want that to display on the LARGE div that I hovered over.

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

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

Answer 1

you just need context:

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

or:

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

capital letters are not needed, and is just bad form IMO.