jquery mouseover 导致闪烁答案

【问题标题】：jquery mouseover causing flickeringjquery mouseover 导致闪烁
【发布时间】：2012-06-25 19:48:44
【问题描述】：

要查看：http://jsfiddle.net/pBt38/5/ 我不知道如何停止 div.message_options_slider 的闪烁，它是一个子元素，所以它不应该保持鼠标悬停处于活动状态吗？

此外，任何建议都需要具有 .live() 函数，因为这将应用于动态元素。

提前致谢！

【问题讨论】：

您遇到了浮动问题...但是您的 CSS 太大了，您能不简化一下吗？
不是更大项目的一部分，我只是复制了所有内容以确保不会错过任何内容。
好吧，您遇到了一些问题，因为您的悬停实际上是附加到它应该悬停的项目之一而不是身体。其次是Gho5t提到的定位。事实上，JS 从根本上是有缺陷的

标签： jquery mouseover

【解决方案1】：

试试这个 JS：

$(".network_block_item").on("mouseover", function(){
    //alert("here");
    var cord = $(this).position();

    $(this).find(".message_options_slider").css({
        position: 'absolute',
        top: cord.top,
        left: 0,
        display: 'block'       
    });
});

$(".network_block_item").on("mouseout", function(){
    $(".message_options_slider").css({ display: 'none' });
});

并将 message_options_slider 添加到每个网络行事物中。

编辑

这段代码实际上可能更好，不确定：

$(".network_block_item").on("mouseenter", function(){
    //alert("here");
    var cord = $(this).position();

    $(this).find(".message_options_slider").css({
        position: 'absolute',
        top: cord.top,
        left: 0,
        display: 'block'       
    });
});

$(".network_block_item,.message_options_slider").on("mouseleave", function(){
    $(".message_options_slider").css({ display: 'none' });
});

【讨论】：

你为什么在 mouseleave 上使用 .network_block_item 两次？
好吧，试试吧，现在当你把鼠标悬停在上面时它会隐藏起来，我会给小提琴，但我实际上没有小提琴帐户：|

【解决方案2】：

message_options_slider 是第三个 div 的子元素，因此当您将其位置更改为位于当前悬停的 div 之上时，它会触发“mouseout”（请注意，如果您将鼠标悬停在第三格）。您可以在每个 div 中有一个 message_options_slider 并更改相应 div 的 CSS，或者您可以将其插入当前 div 使其不会闪烁

【讨论】：

【解决方案3】：

这里有一些问题。如果您只想拥有一个弹出窗口实例，您可以这样做：

http://jsfiddle.net/pBt38/6/

【讨论】：