JQuery - 在鼠標中顯示div

我創建了以下HTML。黃色框包含圖像縮略圖。當我將鼠標懸停在縮略圖上時，它會在縮略圖頂部顯示一個視圖鏈接。JQuery - 在鼠標中顯示div

但是，如果我快速移動鼠標，我得到的鏈接div閃爍。

以下是代碼 - 您可以將其複製並粘貼爲html並進行測試。

<html> 
<head> 
    <title>Image Gallery</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('.divImage').mouseenter(function() { 
       var vl = $('#viewlink'); 
       var vlpos = $(this).position(); 
       vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' }); 
       vl.fadeTo('1', 0.5); 
       vl.css('display', 'block'); 
      }); 

      $('.divImage').mouseleave(function (event) { 
       if (event.toElement.id != 'viewlink') { 
        var vl = $('#viewlink'); 
        vl.fadeTo('1', 0.0, function() { 
         vl.css('display', 'block'); 
        }); 
       } 
      }); 

      $('#viewlink').mouseleave(function (event) { 
       $(this).fadeTo('1', 0.0, function() { 
        $(this).css('display', 'block'); 
       }); 

      }); 
     });   
    </script> 
    <style type="text/css"> 
     .divImage 
     { 
      background-color: Yellow; 
     } 
    </style> 
</head> 
<body> 
    <div id="viewlink" style="width: 100px; height: 30px; display: none; background-color: gray; 
     text-align: center; line-height: 30px; vertical-align: middle; z-index: 1000;"> 
     <a href="Javscript:;" style="text-decoration: underline">View</a></div> 
    <div style="width: 398px; height: 518px; border: 1px solid #DADADA; float: left; 
     overflow-y: auto; overflow-x: hidden"> 
     <div style="width: 378px; height: 278px; margin: 10px; background-color: #FFFFFF"> 
      <table style="margin: 0px; padding: 0px; width: 100%;" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3" style="height: 20px;"> 
        </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
        <td align="center"> 
         <div class="divImage" style="width: 100px; height: 80px; border: 1px solid #DADADA"> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</body> 
</html>

另外mouseleave沒有在FF 4.0中調用。有任何想法嗎？

來源

2011-06-29 NLV

您是否希望鏈接在進入圖片時淡入並在圖片剩餘時淡出？ – MeLight

我猜你正在運行在動畫隊列中。通過在任何其他動畫調用之前調用stop()來阻止此操作。

你編輯的代碼（注意添加stop()每個fadeTo()前）：

$('.divImage').mouseenter(function() { 
      var vl = $('#viewlink'); 
      var vlpos = $(this).position(); 
      vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' }); 
      vl.stop(true,true).fadeTo('1', 0.5); 
      vl.css('display', 'block'); 
     }); 

     $('.divImage').mouseleave(function (event) { 
      if (event.toElement.id != 'viewlink') { 
       var vl = $('#viewlink'); 
       vl.stop(true,true).fadeTo('1', 0.0, function() { 
        vl.css('display', 'block'); 
       }); 
      } 
     }); 

     $('#viewlink').mouseleave(function (event) { 
      $(this).stop(true,true).fadeTo('1', 0.0, function() { 
       $(this).css('display', 'block'); 
      }); 

});

來源

2011-06-29 14:54:12 Brent

完美。像魅力一樣工作。謝謝。 – NLV

@NLV另請參閱@Sparky672關於'hover（）'的回答。它結合了'mouseenter（）'和'mouseleave（）'方法。 – Brent

你可以改變的CSS屬性「可見性」：
$(".element").addClass("visible");
其中
.hidden { visibility: hidden; } .visible { visibility: visible; }

希望這有助於！
NS

來源

2011-06-29 14:34:27

hover()作品，未經閃爍好得多。

$('.divImage').hover(enter, leave); 

function enter() { // mouse enter 
    var vl = $('#viewlink'); 
    var vlpos = $(this).position(); 
    vl.css({ 'top': (vlpos.top + ($(this).height() - vl.height())), 'left': vlpos.left, position: 'absolute' }); 
    vl.fadeTo('1', 0.5); 
    vl.css('display', 'block'); 
}; 

function leave(event) { // mouse leave 
if (event.toElement.id != 'viewlink') { 
     var vl = $('#viewlink'); 
     vl.fadeTo('1', 0.0, function() { 
     vl.css('display', 'block'); 
     }); 
    } 
};

來源

2011-06-29 15:01:30 Sparky

JQuery - 在鼠標中顯示div

回答

相關問題