jQuery悬停功能导致闪烁

-1

我想显示一个div时，悬停在表的第一行。这导致闪烁。我该如何解决它？jQuery悬停功能导致闪烁

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="hovermouse._Default" %> 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
</asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 


     $(document).ready(


function() { 

    $("table tr:first").hover(function() { 
     $("#mydiv").show() 
    }, 
      function() { 
       $("#mydiv").hide(); 
      } 
      ); 
} 
     ); 
    </script> 

    <div id="mydiv"> 
     you can see me</div> 

    <table border="true"> 
     <tr> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
     </tr> 
     <tr> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
     </tr> 
     <tr> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
      <td> 
       hi 
      </td> 
     </tr> 
    </table> 
</asp:Content>

来源

2011-08-14 user603007

制作一个测试用例。 –

实施悬停行为时，您不希望悬停目标因该行为而移动。悬停目标在页面上的位置应在悬停操作期间修复。在你的具体情况下，你可以把DIV **放在桌子下面......另一个解决方案是不要通过hide（）隐藏DIV，但是将其visibility属性设置为hidden，这将隐藏但它仍会像以前一样占据相同的（垂直）空间。 –

哪个浏览器？它将在逻辑上闪烁，因为当您显示新的<div>时，它将取代<tr>被悬空，<tr>将不再被徘徊，导致无限循环。许多浏览器不这样做，它们只在鼠标移动时应用悬停效果，但鼠标仍然可以移动少量并导致闪烁。

这里要做的最好的事情就是不要那样做。问自己几个问题：

如若<div>实际上处于隐藏状态，当用户将鼠标关闭<tr>的？
这段代码的实际点是什么？你想用这个完成什么？
<div>实际上替换<tr>，或者您是否应用了样式表来覆盖它？如果你没有，这就是你的意思，那么做吧。

这里的测试情况下，我放在一起，从您发布的内容：http://jsfiddle.net/YKCA5/

如果你能提供一个更完整的例子（如适用其他样式&脚本），请做。

来源

2011-08-14 01:56:38 Ryan

jQuery悬停功能导致闪烁

回答

相关问题