Question

我想要一个简单的Jquery解决方案，将鼠标悬停在类'容器'上并淡入'叠加层。在这个简单的Jquery代码中，将显示所有'容器'的所有'覆盖'。有没有人知道一个简单的解决方案，只是淡化这个类中'overlay'的'overlay'？

感谢。

$('.overlay').hide();
$('.container').hover(function() {
    $('.overlay').fadeToggle(300);
});

<!-- container 01 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<!-- container 02 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<!-- container 03 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

Answer 1

$('.container').hover(function() {
    $(this).find('.overlay').fadeToggle(300);
});

http://jsbin.com/owehim/1/

FadeIn类用于多种用法

1 个答案: