jquery - 使用 jQuery 在链接的鼠标悬停时制作 div 淡入淡出

Question

我想做的事情应该很简单，但是由于html的结构方式很复杂，我无法改变。当您的帐户发生鼠标悬停时，我基本上需要标题中的stackoverflow。当鼠标离开时，一个小菜单会再次淡入淡出。

HTML

  <div id="top-links">
    <a id="my_link">Link</a>
    <div id="my_mouseover">
      content
    </div>
  </div>

Javascript

 $jQ('#my_link').mouseenter(function(){
  $jQ('#my_mouseover').fadeIn(200);
  $jQ('#my_mouseover').mouseleave(function(){
      $jQ('#my_mouseover').fadeOut();
  });
  $jQ('#my_link').mouseleave(function(){
      $jQ('#customer_mouseover').fadeOut();
  });
});

我的问题是，当我在 和 之间移动鼠标时，div 淡入<a>淡出<div>。有没有办法说：

$jQ('#my_mouseover').mouseleave(function(){
      //there's no such thing as mouseIsOver
  if(!$jQ('#my_link').mouseIsOver()){
    $jQ('#customer_mouseover').fadeOut();
  }    
});

有谁知道如何做到这一点？我无法在谷歌上找到我需要的东西。

Answer 1

您可以将mouseenterandmouseleave放在top-linksdiv 上：

$('#top-links').mouseenter(function(){
  $('#my_mouseover').fadeIn(200);
});
$('#top-links').mouseleave(function(){
  $('#my_mouseover').fadeOut(200);
});

http://jsfiddle.net/KJE7x/

Answer 2

$('#top-links').on({
    mouseenter : function() {
        $('#my_mouseover').fadeIn(200);
    },
    mouseleave : function(){
        $('#my_mouseover').fadeOut(200);
    }
});

Answer 3

将 mouseenter 和 leave 事件添加到您的父容器。这也将为其 shild 元素（<a>和<div>）获取 mouseover 和 mouseleave 事件

$('#top-links').hover(function(){
  $('#my_mouseover').fadeIn(200);
},function(){
  $('#my_mouseover').fadeOut(200);
});

注意：您可以使用.hover()而不是为每个事件创建两个单独的函数

Answer 4

在使用 Pete 与我分享的方法添加其他链接时遇到问题，最终这就是我所做的：

  $('#top-links').mouseenter(function(){
 $('#my_link').mouseenter(function(){
     //fade everything else out
     $('#my_mouseover2').fadeOut();
     $('#my_mouseover').fadeIn(200);
 });
 $('#my_link2').mouseenter(function(){
     $('#my_mouseover').fadeOut();
     $('#my_mouseover2').fadeIn(200);
 });
});
 $('#top-links').mouseleave(function(){

$('#my_mouseover').fadeOut(200);
$('#my_mouseover2').fadeOut(200);
});