Question

美好的一天，

我有这些div（s）容器有2个内部div（s），其中包含（a）image＆amp; （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>

show / hide工作正常，除非鼠标悬停区域位于描述文本区域内的某处，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();   
});

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

2 个答案: