Question

Trying to move some divs using hover, this is my markup:

<div class="item dark-grey">
    <div class="img">
        <img src="images/case-study-develop.jpg" width="174" height="59" alt="Case Study">
    </div>
    <div class="triangle-container">
        <div class="triangle-border-light-blue"></div>
        <div class="triangle-dark-grey"></div>
    </div>
    <div class="content light-blue">
        <h2><a href="#">Developing community work with the voluntary sector</a></h2>
    </div>
</div>

This is what I am using at the moment, which works fine but I only want the hover on the content div, not the whole item div.

$(document).ready(function() {
            $('.item').hover(function(e){
                    $('.img', this).animate({height: "30px"},100);
            },function(e){
                    $('.img', this).animate({height: "58px"},100);
            });
    });

I thought if I hover over .item .content and then get the parent, and find .img belonging to the parent it would work, but am not sure if I am doing it right.

$('.item .content').hover(function(e){
                $(this).parents('.img').animate({height: "30px"},100);
}

Answer 1

What you have won’t work because .img isn’t a parent of .content, it’s a sibling.

You can check the siblings() of .content():

$('.item .content').hover(
    function(e){
        $(this).siblings('.img').animate({ height: "30px" }, 100);
    },
    //function...
});

Or you can traverse up the DOM to the parent of .content and then find('.img'):

$('.item .content').hover(
    function(e){
        $(this).parent().find('.img').animate({ height: "30px" }, 100);
    },
    //function...
});

Or if you can guarantee that the structrue of these divs will never change, you can use prev():

$('.item .content').hover(
    function(e){
        $(this).prev().prev().animate({ height: "30px" }, 100);
    },
    //function...
});