Question

我正在尝试制作一个简单的弹出代码。

当我鼠标输入div时，我想要显示相关的div。

如果我将鼠标悬停在相关的div上，我想保持该div显示，否则隐藏相关的div。

目前我有这个js：

$(document).ready(function() {
custom_popover();
});

function custom_popover() {

    $(".asset-container").on("mouseenter", function () {
    $('.popover-content[data-id=' + $(this).children("video").data("id") + ']').fadeIn("fast").delay(1000);

});

    $('.popover-content').hover(function(){
    $('.techinfo').show()
})

    $(".asset-container").on("mouseleave", function () {
    $('.popover-content[data-id=' + $(this).children("video").data("id") + ']').fadeOut("fast");

  });   

}

使用此代码：它正在执行我想要的所有操作，但它会快速隐藏然后再次显示，然后隐藏。不顺利，我不认为这是写这个的正确方法。

HTML：

<ul class="col-xs-4">

    <li class="thumnail-video">
    <div class="popover-content" data-id="71" style="display: none;">    </div>

<div class="asset-container">

<video class="img-responsive portrait" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/71/mobile/3.mp4" data-id="71"></video>

    </div>
</li>

</ul>
<ul class="col-xs-4">

  <li class="thumnail-video">
    <div class="popover-content" data-id="69" style="display: block;">    </div>

<div class="asset-container">

<video class="img-responsive landscape" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/69/mobile/2.mp4" data-id="69"></video>

    </div>
</li>

</ul>

Answer 1

在弹出窗口关闭时添加一个简短的timeout。输入另一个div时Clear the time out，当剩下第二个div时触发关闭。

div中的div显示其他div，如果其他div是hoved，则继续显示div else hide

1 个答案: