Question

I’m trying to fadeIn the div .description when I over the parent div .content. I have a couple of those item in my page, so I don’t know how to implement the children() in my jQuery code. Right now, when I hover one .content, every .description are faded out.

Here’s the HTML:

<div class="item">
    <div class="content">
        <div class="description">
            <p>
                <span>Super Garfield</span><br />
                <span>by myself</span>
            </p>
        </div>
        <div class="image" style="background-image: url('style/img/body-item-sample1.png')"></div>
    </div>
    <div class="view">
        1234
    </div>
    <div class="like">
        1234
    </div>
</div>

Here’s the jQuery:

<script>
    $(document).ready(function(){
        $(".content").hover(function(){
            $(".description").fadeIn(100); // This should set the opacity to 100% on hover
        },function(){
            $(".description").fadeOut(100); // This should set the opacity back to 30% on mouseout
        });
    });
</script>

Answer 1

You’re pretty close. using $(this) and .children(), you can select the .description element only contained within the element that triggered the .hover() event. There’s a working example here. Code below.

$(document).ready(function() {
    $(".content").hover(function() {
        $(this).children(".description").fadeIn();
    }, function() {
        $(this).children(".description").fadeOut();
    });
});