鼠标悬停时显示/隐藏DIV

Question

我希望能在鼠标悬停在图片/链接上时显示一个DIV，我已经编写了以下代码：

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

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

在鼠标悬停时会显示，但当我移动到div上时它会隐藏。如何使div在鼠标悬停在其上时不隐藏？

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

- Tanveer

Answer 1

[根据评论重新编辑] jsfiddle已更新，删除了仅使用CSS的解决方案。技巧在于监控滑动元素的悬停状态，并使用超时来允许用户移动到滑动元素上（请参见更新后jsfiddle中的注释）。

jsfiddle从OP的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);
 }

}

- KooiInc

---

它在IE上无法正常工作，只会闪烁。顺便说一下，我不喜欢编写特定于浏览器的东西。 - Tanveer

@Ahsan：是的，它太简单了。我修改了一下，现在应该可以用了（包括IE）。 - KooiInc

@Ahsan：没有什么是太复杂的。我已经改编了你的jsfiddle：http://jsfiddle.net/FNEmP/并在3个浏览器中进行了测试。这里可以用。 - KooiInc

@Koolinc：现在没问题了，干得好！请在您的答案中添加您的fiddle。这样Tanveer就可以将其标记为答案。谢谢！ - Ahsan Rathod

@Tanveer，Koolinc已经更新了Fiddle，它可以像您要求的那样正常工作。 - Ahsan Rathod

Answer 2

Tanveer，请查看此演示：http://jsfiddle.net/rathoreahsan/3hqrW/

您想要在悬停时显示的div应该在您想要悬停的主div内，而主div应该具有CSS属性：display:block

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

- Ahsan Rathod

---

你是怎么知道他的HTML结构的？ - Blaster

@Blaster，我不知道他的HTML结构，但我建议他使用这种结构，因为我已经在以下帖子中提出了这个建议：https://dev59.com/g1rUa4cB1Zd3GeqPkYDM#7146486 - Ahsan Rathod

@AhsanRathod 回答得不错，但我正在实现类似 Facebook 通知的功能，图片在头文件中，要显示的 div 在页面中。我已经通过 CSS 定位了 div，现在只想显示/隐藏 div。与此同时，我正在尝试你的技巧，如果你有其他想法，请建议一下。 - Tanveer

@Tanveer：看看我的另一个演示，希望它有所帮助：http://jsfiddle.net/rathoreahsan/EqMFJ/ - Ahsan Rathod

@AhsanRathod 请查看 http://jsfiddle.net/3hqrW/15/ ，我只想要这样的效果：如果我移动到下面的 div 上，它不应该隐藏，只有当指针离开两个 div 时才隐藏。 - Tanveer

Answer 3

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

- Ajai

---

你想通过这样做实现什么？ - Ahsan Rathod