Question

当鼠标悬停在图像上时，我需要在图像上方显示一些隐藏的内容。我遇到的问题是内容闪烁（由于不透明度），并且因为显示/隐藏事件引发了很多。

如何更新，以便在鼠标悬停在图像上时只会运行一次？

为锚点附加/分离点击事件的最佳方法是什么？

HTML：

<ul>
    <li>
        <img src="http://placehold.it/350x150" />
        <div>
             <h3>Title</h3>

            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p> <a href="#">+</a>

        </div>
    </li>
    <li>
        <img src="http://placehold.it/350x150" />
        <div>
             <h3>Title</h3>

            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p> <a href="#">+</a>

        </div>
    </li>
    <li>
        <img src="http://placehold.it/350x150" />
        <div>
             <h3>Title</h3>

            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p> <a href="#">+</a>

        </div>
    </li>
    <li>
        <img src="http://placehold.it/350x150" />
        <div>
             <h3>Title</h3>

            <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</p> <a href="#">+</a>

        </div>
    </li>
</ul>

CSS：

body {
    margin: 0;
    padding:0;
}
ul {
    overflow: hidden;
    margin: 0;
    padding:0;
    list-style-type: none;
}
li {
    float: left;
    padding: 0;
    cursor: pointer;
    margin: 0;
    width: 50%;
    position: relative;
}
img {
    display: block;
}
div {
    display: none;
    background: black;
    opacity: .4;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 1em;
    color: white;
}
h3 {
    margin-top: 0;
}

jQuery的：

var $img = $('ul').find('img');

$img.on({
    mouseenter: function () {
        var $div = $(this).siblings('div'),
            $a = $div.find('a');

        $div.show();

        $a.on('click', function (e) {
            var $container = $(this).closest('.content');

            e.preventDefault();

            console.log('clicked');
        });
    },
    mouseleave: function () {
        var $div = $(this).siblings('div'),
            $a = $div.find('a');

        $div.hide();
        $a.off('click');
    }
});

Answer 1

为什么一遍又一遍地为锚点分配和删除点击事件？做一次：

$('ul a').click(function(e) {
    var $container = $(this).closest('.content');

    e.preventDefault();

    console.log('clicked');
});

然后通过添加以下内容让魔术与CSS一起工作：

li:hover div {
    display: block;
}

现在Javascript更少：JsFiddle

Answer 2

将鼠标输入父<li>。由于它包含图像和div，因此当鼠标显示在div下时，它不会发疯。 jsFiddle

使用on（）和mouseenter / mouseleave防止频繁闪烁/代码运行

2 个答案: