javascript - 在鼠标悬停时显示/隐藏DIV

我想在图像/链接悬停上显示DIV，并且编写了以下代码

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

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

DIV正在悬停显示，但是当我移动到div时它会隐藏，当鼠标悬停在上面时，如何阻止div隐藏

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

最佳答案

[根据评论进行编辑] jsfiddle进行了修订，删除了仅CSS的解决方案。技巧是监视滑动元素的悬停状态并使用超时来允许用户在滑动元素上移动(另请参阅更新的jsfiddle中的注释)。

来自OP的jsfiddle jsfiddle @here

使用#id的悬停功能:

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);
 }

}