3

块闪烁.hover()

这是一个完整的例子- http://jsfiddle.net/xBEjQ/

如何解决这个问题?

UPD:鼠标离开较小的块( )后应该删除弹出窗口.image,而不是.popup块。

4

4 回答 4

6

对于更新的问题:由于鼠标事件不会发生在那个较小的元素上(它完全重叠)你必须使用第三个 <div>这样的:

<div class="block">
    <div class="popup"></div>
    <div class="popup upper"></div>
    <div class="image"></div>
</div>

并添加这个 CSS(注意高于z-index另一个.popup):

.upper { width: 100px; height: 100px; z-index: 41; }

和要匹配的脚本:

$(".block .image").mouseenter(function(){
    console.log($(this).siblings(".popup").length);
  $(this).siblings(".popup").show();
});
$(".block .upper").mouseleave(function(){
  $(this).siblings(".popup").andSelf().hide();
});

你可以在这里测试一下


对于上一个问题:由于弹出窗口位于元素的顶部,因此mouseenter在触发器mouseleave上使用弹出窗口,如下所示:

$(".block .image").mouseenter(function(){
  $(this).siblings(".popup").show();
});
$(".block .popup").mouseleave(function(){
  $(this).hide();
});

你可以在这里测试它

于 2010-11-05T22:54:41.697 回答
1

在鼠标悬停时显示弹出窗口 在鼠标悬停时隐藏弹出窗口

http://jsfiddle.net/generalhenry/WkH6q/

于 2010-11-05T22:57:19.543 回答
1

更新了你的 jsfiddle:http: //jsfiddle.net/xBEjQ/6/

HTML

<div class="block">
    <div class="popup"></div>
    <div class="image"></div>
</div>

jQuery

$(".block .image").mouseover(function(){
    $(this).parent().find(".popup").show();
});

$(".block .popup").mouseout(function() {
    $(this).hide();
});

CSS

.block { position: relative; width: 400px; height: 400px; background: #ccc; }
.popup { display: none;
    position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: #eee; z-index: 40; }
.image { position: relative; width: 100px; height: 100px; background: #aaa; z-index: 30;
于 2010-11-05T22:54:37.833 回答
0
$(".block .image").mouseover(
    function(){
        $(this).parent().find(".popup").show();
    }
);
$(".block .popup").mouseout(
    function(){
        $(this).hide();
    }
);

这仅适用于“图像”上方的“弹出窗口”。它闪烁的原因是因为一旦“弹出”显示它就会触发“图像”上的“鼠标退出”,从而隐藏“弹出”

只要“弹出窗口”不位于“图像”上方,您的代码就可以正常工作。

于 2010-11-05T22:56:02.087 回答