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/

Answer 2

另一种选择是在 carousel-wrapper 之前包含和仅用于悬停事件的额外div。

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

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

    },

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

});

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

在悬停时使div可见

2 个答案: