在鼠標懸停時顯示/隱藏DIV

Question

我想在圖像/鏈接懸停上顯示一個DIV，我已經編寫了以下代碼

   $("#NotificationSummary").hover(
      function () {
          $("#dvNotifications").slideDown();
      },
      function () {           

          $("#dvNotifications").slideUp();
      }
    );

DIV在懸停時顯示，但是當我移動到它隱藏的div時，如何在鼠標懸停時阻止div隱藏

請查看演示http://jsfiddle.net/3hqrW/15/

Answer 1

[ reedit基於評論] jsfiddle修訂，刪除了css-only解決方案。 訣竅是監視滑動元素的懸停狀態並使用超時允許用戶在滑動元素上移動（另請參閱更新的jsfiddle中的注釋）。

來自OPs jsfiddle @here的jsfiddle

使用#ids的懸停功能：

function hover(e){
 e = e || event;
 var el = e.target || e.srcElement
    ,showel = $('#dvNotifications')
 ;
 if (!/NotificationSummary/i.test(el.id)) {
  showel .attr('data-ishovered',/over/i.test(e.type));
 } else {
  showel .attr('data-ishovered',false)
 }

 if (/true/i.test(showel .attr('data-ishovered'))){return true;}

 if (/over$/i.test(e.type) && /NotificationSummary/i.test(el.id)){
    showel .slideDown();
 } else {
    setTimeout(function(){
        if (/false/i.test(showel .attr('data-ishovered'))) {
            showel .slideUp();
            showel .attr('data-ishovered',false);
        }
      }
    ,200);
 }

}

Answer 2

Tanveer很高興看到這個演示： http ： //jsfiddle.net/rathoreahsan/3hqrW/

要在懸停時顯示的div應位於要懸停的主div內，而主div應具有css屬性： display:block

另一個演示： http ： //jsfiddle.net/rathoreahsan/SGUbC/

Answer 3

  $("#NotificationSummary").mouseenter(function() {
       $("#dvNotifications").fadeIn();
  }).mouseleave(function() {
      $("#dvNotifications").fadeOut();
  });