使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，将轮播包装器定位为悬停目标：

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

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

});

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

Answer 2

另一个选择是在carousel-wrapper之前，仅在悬停事件中包含和extra div。

$(document).ready(function () {
    $('.hover-block').hover(function () {

        $(this).siblings('.semitransparentoverlay').fadeIn('200');

    },

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

});

检查小提琴： http : //jsfiddle.net/benjasHu/d1wg3fe0/