覆盖对话框悬停事件

Overlay interrups hover event

本文关键字：事件 悬停 对话框 覆盖      更新时间：2023-09-26

更新：

被要求包括我的HTML，注意这是使用Handlebars为我的NodeJS代码：

<div id='grid'>
    {{#each projects}}
        <img src='{{image_path}}' id='image-{{id}}' class='gridImage'>
        <div id='overlay-image-{{id}}' class='overlay'>
            <div class='detail'>
                <span style='font-size: 18px; font-family:OpenSans-Bold'>{{name}}</span>
                <br><br>
                {{shortDescription}}
                <br><br>
                Made by {{developers}}
            </div>
        </div>
    {{/each}}
</div>

我有一个图像网格，当你将鼠标悬停在每个图像上时，它会使用div覆盖告诉你关于图像的一些信息。就像这样。

现在，下面是jQuery代码：

$('.gridImage').mouseover(function() {
    $('#overlay-'+$(this).attr('id')).css({
        'top': $(this).position().top, 
        'left': $(this).position().left,
        'right': $(this).position().left, 
        'bottom': $(this).position().bottom,
        'width': $(this).width(),
        'height': $(this).height()
    }).fadeIn(150);
});
$('.gridImage').mouseout(function() {
    $('#overlay-'+$(this).attr('id')).fadeOut(150);
});

从本质上讲，这段代码检测当你将鼠标悬停在图像上时，它会根据它是哪个图像（id）找到正确的（div）覆盖，并将其拍打在图像上。现在，因为div完全覆盖了图像，所以调用mouseout并导致覆盖淡出。

很简单，这就是为什么我把鼠标放在图像上，它在覆盖中淡出，然后淡出——基本上它会闪烁

我该怎么解决这个问题？

您可以尝试直接在覆盖图而不是图像上设置mouseout事件。我还觉得使用一些CSS 可能有更好的解决方案

尝试将mouseover/mouseout更改为mouseenter/mouseleave。

编辑

这是我使用的jsfiddle：

http://jsfiddle.net/ax9X5/2/

编辑2

由于.overlay不是.gridImage的子元素，因此上述解决方案要求将两者作为子元素放入容器中，并将ID和mouseenter移动到该容器中。

玩得开心！

相关文章：