fondIn和fade在jover时使用jQuery的孩子

Question

当我在父div .content上时,我正试图淡化div .description.我的页面中有几个这样的项目,所以我不知道如何在我的jQuery代码中实现children().现在,当我悬停一个.content时,每个.description都会消失.

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

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

你很亲密.使用$(this)和.children(),您可以选择.description仅包含在触发.hover()事件的元素中的元素.有一个工作示例这里.代码如下.

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