悬停时使用jQuery的fadeIn和fadeOut一个孩子答案

【问题标题】：fadeIn and fadeOut a children with jQuery when hovering悬停时使用jQuery的fadeIn和fadeOut一个孩子
【发布时间】：2011-09-04 02:00:28
【问题描述】：

当我越过父 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>

【问题讨论】：

标签： jquery html hover children

【解决方案1】：

你已经很接近了。使用$(this) 和.children()，您可以选择仅包含在触发.hover() 事件的元素中的.description 元素。有一个工作示例here。代码如下。

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

【讨论】：

非常感谢！完美运行！

【解决方案2】：

你想要parent selector ">"

例如：

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

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

【讨论】：

这将淡入 all .descriptions 内 any .content。 OP 只想淡入当前悬停元素内的内容。
是的，没想到。你的答案更好
谢谢。问题有时可能有点神秘。我认为这个的关键是I have a couple of these on my page。

【解决方案3】：

这是解决问题的一种方法。

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

希望对你有帮助

【讨论】：