Question

I am using the hover function for mouse over in a menu. I have selected a particular element using it’s class. To make changes to only that element and not all the elements with that class I can use ‘this’. But I wanna make changes to the h3 tag inside that class element. Again the one I have hovered on and not all elements with that class name.

I tried using the > element after ‘this’ but it doesn’t work.

How do I do that? I hope I have explained well enough. I hope you understand using the code.

$('.slide').hover(
    function(){
        $(this>'h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this>'h3').animate({
            height: '25px'
        });
    }
);

All answers appreciated.
Thanks

Answer 1

You use .find() to get the <h3> element inside this.

$('.slide').hover(
    function(){
        $(this).find('h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this).find('h3').animate({
            height: '25px'
        });
    }
);

If the <h3> is a direct child, it is a little more efficient to use .children():

$(this).children('h3').animate({