Question

更新

请求包含我的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叠加层告诉您有关图像的信息。 Like this.

现在，这是执行此操作的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被调用并导致叠加淡出。

非常简单，这就是它让我把鼠标放在图像上，它在叠加层中消失然后淡化它 - 基本上它闪烁

我该如何解决这个问题？

Answer 1

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

Answer 2

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

修改

这是我正在使用的jsfiddle：

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

修改2

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

玩得开心！

叠加中断悬停事件

2 个答案: