顯示/隱藏DIV在

我想顯示在圖像/鏈接懸停AA DIV和下面的代碼顯示/隱藏DIV在

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

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

DIV是否顯示在懸停我已經寫了，但是當我移動到div的它隱藏，怎麼能我停格在躲，而鼠標在它

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

來源

2012-06-25 Tanveer

[重新編輯基於評論] jsfiddle修改後，刪除了僅限CSS的解決方案。訣竅是監視滑動元素的懸停狀態，並使用超時來允許用戶移動滑動元素（另請參閱更新後的jsfiddle中的註釋）。從有機磷農藥衍生

的jsfiddle的jsfiddle @here

懸停功能使用#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); 
}

}

來源

2012-06-25 07:02:47 KooiInc

它不工作IE，只是閃爍。順便說一句，我不喜歡寫東西瀏覽器具體 – Tanveer

是的，IE（版本10可能工作，或使用谷歌瀏覽器框架（https://developers.google.com/chrome/chrome-frame/））。 – KooiInc

@KooiInc：如果您永遠不會將指針指向較低的div，則較低的div將永遠保持打開狀態。在這個演示中看到：http://jsfiddle.net/rathoreahsan/3hqrW/54/ –

Tanveer親切看到這個演示：http://jsfiddle.net/rathoreahsan/3hqrW/

要顯示懸停應該是要在其上懸停的主要DIV的DIV，和主要的div應有的CSS屬性：display:block

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

來源

2012-06-25 06:10:48

你怎麼知道他的HTML結構？ – Blaster

@Blaster我不知道他的HTML結構，但我建議他這種結構，因爲我已經在下面的帖子中提出這個建議：http://stackoverflow.com/questions/7146281/how-to-display-a- form-on-mouseover-and-hide-it-on-mouseout/7146486 –

@AhsanRathod很好的回答，但我正在實現像Facebook通知一樣的功能，圖像在頭文件中，div顯示在頁面中。我通過CSS定位了div，現在只想顯示/隱藏div。我正在嘗試你的技術，如果你有其他的想法，那麼請推薦 – Tanveer

-1

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

來源

2012-06-25 07:09:17 Ajai

你想通過這樣做來達到什麼目的？ –

顯示/隱藏DIV在

回答

相關問題