鼠标悬停时闪烁，.hover() 显示/隐藏 div(s)

Question

早安，

我有这些 div(s) 容器，其中 2 个内部 div(s) 分别包含 (a) 图像和 (b) 文本描述。

我在页面加载时使用 .hide() 隐藏这些 (b) 文本描述 div，然后使用 .hover() 显示/隐藏隐藏的文本描述 div，示例代码如下：

<div class="projectBlock">
<div class="imgBlock" id="imgBlock1"><a href="http://www.tesco.com.my" target="_blank"><img src="http://i23.photobucket.com/albums/b395/yiyonglee/thumb-project-tesco.jpg"></a>

</div>
<div class="descBlock" id="descBlock1">Tesco Malaysia</div>

显示/隐藏工作正常，除非鼠标悬停区域命中描述文本区域内的某个位置，否则 div 容器在移动时会闪烁。

我的 jQuery 部分：

$('.descBlock').hide();

$('#imgBlock1').hover(function () {
    $('#descBlock1').show();
}, function () {
    $('#descBlock1').hide();
});

$('#imgBlock2').hover(function () {
    $('#descBlock2').show();
}, function () {
    $('#descBlock2').hide();
});

在这里演示：jsfiddle

为什么会这样？提前致谢。

Answer 1

改为：

jsFiddle

$('.descBlock').hide();

$('.projectBlock').hover(function () {
    $(this).find('.descBlock').show();
}, function () {
    $(this).find('.descBlock').hide();
});

您只需执行一次即可影响所有 projectBlock 元素。

Answer 2

很简单，因为覆盖块 descBlock{1|2} 会遮挡您正在观察鼠标事件的较大块。

See if this is more what you want

通过放置另一个 hover() 侦听器，并让该回调显示子块，无论鼠标是在还是在外面。我只对 descBlock1 做了，所以你可以看到对比。

$('#descBlock1').hover(function () {
 $('#descBlock1').show();
}, function () {
 $('#descBlock1').show();   
});