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

我的问题是当我在<a>和<div>之间移动鼠标时，div会重新进入和退出。有什么方法可以说：

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

有谁知道怎么做？我无法在谷歌上找到我需要的东西。

Answer 1

您可以将mouseenter和mouseleave放在top-links div上：

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

http://jsfiddle.net/KJE7x/

Answer 2

添加mouseenter并将事件留给您的父容器..这将为其shild元素（<a>和<div>）获取mouseover和mouseleave事件

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

注意：您可以使用.hover()代替为每个事件创建两个sepearte函数

Answer 3

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

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

使用jQuery在链接鼠标悬停时制作div fadein

4 个答案: