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

Show / hide DIV on mouse over

本文关键字：隐藏 DIV 显示 鼠标 悬停      更新时间：2023-09-26

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

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

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

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

[根据注释重新编辑] JSFIDDLE 修订，删除了仅限 CSS 的解决方案。诀窍是监视滑动元素的悬停状态，并使用超时允许用户在滑动元素上移动（另请参阅更新的 jsfiddle 中的注释）。

jsfiddle 派生自 OPs 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);
 }

}

Tanveer 请看这个演示： http://jsfiddle.net/rathoreahsan/3hqrW/

要在悬停时显示的div 应该位于要悬停的主div 内，并且主div 应具有 css 属性：display:block

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

  $("#NotificationSummary").mouseenter(function() {
       $("#dvNotifications").fadeIn();
  }).mouseleave(function() {
      $("#dvNotifications").fadeOut();
  });
相关文章：