0

再会，

我有这些 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

为什么它会以这种方式行事？提前致谢。

4

2 回答 2

4

改为：

jsFiddle

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

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

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

于 2013-08-11T14:36:34.827 回答
0

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

看看这是否是你想要的更多

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

$('#descBlock1').hover(function () {
 $('#descBlock1').show();
}, function () {
 $('#descBlock1').show();   
});
于 2013-08-11T14:49:31.080 回答