Simple jQuery with parrents i quess

Question

I got stuck i want to move separately the class .inner in the USP! i don't get how this works

How do i solve this problem?

HTML

<div class="usps">
    <div class="dienst">
        <div class="inside">
            <div class="inner">
                <h2>Dakbedekking</h2>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, labore.</div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</div>
<div class="usps">
    <div class="dienst">
        <div class="inside">
            <div class="inner">
                <h2>Dakbedekking</h2>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, labore.</div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</div>

jQuery

$('.usps').hover(function(){ 
     $('.inner').toggleClass('up');
     $('.bottom').toggleClass('red');
});

Answer 1

You need to target relative elements - in your case I think you want to find the .inner and .bottom elements within the hovered usps element

$('.usps').hover(function(){ 
     $(this).find('.inner').toggleClass('up');
     $(this).find('.bottom').toggleClass('red');
});

Demo: Fiddle

this inside the hover handler will refer to the hovered usps element, so you can use that reference to find the inner and bottom element within the current usps element.