javascript - 使 div 在悬停时可见

Question

我需要让 div 在悬停时可见

$(document).ready(function () {
$('.carousel').hover(function () {

    $(this).parent().next('.semitransparentoverlay').fadeIn('200');

},

function () {
    $(this).parent().next('.semitransparentoverlay').fadeOut('200');
});

});

但是在悬停时 div 一次又一次地变得可见
http://jsfiddle.net/n8b65qbb/14/
如何防止它并使 div 仅可见一次，然后仅在 mouselive 上将其隐藏一次？

Answer 1

如果您改为将鼠标悬停在父级上，并将叠加层移动到包装器内，这将防止叠加层淡入触发第二个悬停事件。

html，在 carousel-wrapper 内部移动覆盖层:

<div class="block-11 block-1">
    <div class="carousel-wrapper" id="carousel-1">
        <ul class="carousel clearfix">
            <li><img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350"/></li>
        </ul>
    <div class="semitransparentoverlay">
        <input name="" type="button" value="Show all" class="btn-1"/>
    </div>
</div>

Jquery，针对悬停的 carousel-wrapper:

$(document).ready(function () {
    $('.carousel-wrapper').hover(function () {
        $(this).children('.semitransparentoverlay').fadeIn('200');
    },

    function () {
        $(this).children('.semitransparentoverlay').fadeOut('200');
    });

});

更新链接:http://jsfiddle.net/carasin/1po0acv6/2/