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()元素。有一个工作示例here。代码如下。

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

Answer 2

你想要parent selector“＆gt;”

e.g：

$(".content > .description").fadeIn(100);

http://jsfiddle.net/scpike/Crq64/

Answer 3

这是一种解决方法。

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

希望这有帮助

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

3 个答案: