2011-08-14 3 views
-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> 
+2

테스트 케이스를 만듭니다. –

+1

호버 동작을 구현할 때 호버 대상이 해당 동작의 결과로 이동하는 것을 원하지 않습니다. 마우스를 올려 놓는 동안 페이지에서 마우스를 움직여 표적의 위치를 ​​고정해야합니다. 특정 경우에는 DIV **를 ** 테이블 아래에 둘 수 있습니다. 또 다른 해결책은'hide()'를 통해 DIV를 숨기지 않고'visibility' 속성을'hidden'으로 설정하면 숨길 수 있습니다 그것은 여전히 ​​이전과 같은 (수직) 공간을 차지할 것입니다. –

답변

1

어떤 브라우저입니까? 새로운 <div>을 표시하면 <tr>이 이동되어 <tr>이 더 이상 호버링되지 않아 무한 루프가 발생하기 때문에 논리적으로 깜박입니다. 많은 브라우저가 마우스를 움직일 때 마우스를 움직일 때만 호버 효과를 적용하지만 마우스는 여전히 작은 양만큼 움직이고 깜박임을 유발할 수 있습니다.

여기서해야 할 일은 그렇게하지 않는 것입니다. 몇 가지 질문 자신에게 물어 :

  1. 해야 <tr>의 오프 <div> 실제로 숨겨져있을 때 사용자의 마우스를 올리면?
  2. 이 코드의 실제 요점은 무엇입니까? 이것으로 무엇을하고 싶니?
  3. <div> 실제로 displace<tr>이거나 스타일 시트를 적용하여이를 덮어 썼습니까? 당신이하지 않았고 이것이 당신이하고자하는 일이라면 그렇게하십시오.

다음은 무엇을 게시에서 내가 함께 넣어 테스트 케이스 : 당신이 더 완전한 예 (예를 들어, 적용 스타일 & 다른 스크립트)를 제공 할 수 있다면 제발 http://jsfiddle.net/YKCA5/

.

관련 문제