javascript - 如何在鼠标悬停时显示/隐藏 div？

Question

可能重复：
如何使用 jquery 在鼠标悬停时显示/隐藏 div？

我有一个这样的div：

<div id="parent">
     foo
      <div id="child" style="display:none;">
         hidden
       </div>
</div>

我希望child每当有人将鼠标移到parentdiv 上时显示 div，当他将鼠标移开时，隐藏父 div。

但是，如果我这样做：

$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
   console.log('here');
   $("#child").toggle();
}

然后，每次我将鼠标移到#parent div 上时，这两个事件似乎都会被调用两次。我怎样才能达到我想要的？

Answer 1

$("#parent").hover(
   function(){
      $("#child").show();

   },
   function(){
      $("#child").hide();
   }
)

Answer 2

添加css怎么样？

#parent #child{显示：无；}

#parent:hover #child{display:block;}

和

 <div id="parent">
         foo
          <div id="child" >
             hidden
           </div>
    </div>

Answer 3

在这种情况下，您不应该使用切换。如果您总是想在鼠标悬停时隐藏并在鼠标悬停时显示，那么将它们定义为:)

$("#parent").mouseover(function() {
    $("#child").fadeIn(); // or .show() for no fading
});

$("#parent").mouseout(function() {
    $("#child").fadeOut(); // or .hide() for no fading
});

Answer 4

不要使用切换功能！！

尝试这样的事情：

$("#parent").hover(function(){
  $("#child").show();
}, function(){
  $("#child").hide();

})

这应该可以工作！！

Answer 5

更短：

$("#parent").hover(function () {
   $("#child").toggle(); 
});​

演示。

注意：您可以toggle用fadeToggle或代替slideToggle。

Answer 6

您可以像这样尝试 .hover() ，

$('#divid').hover(
function(){
 //mouseenter function
},
function(){
 //mouseleave function
}
);

Answer 7

你应该使用这样的东西：

$("#parent").mouseover(function(){
    $('#child').show();
});
$("#parent").mouseout(function(){
    $('#child').hide();
});​

jsFiddle 示例：http: //jsfiddle.net/phcwW/

Answer 8

<div id="parent" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
     foo
      <div id="child" style="display:none;">
         hidden
       </div>
</div>

JS方法：

function callMouseOver(){
    document.getElementById("child").style.display = "inline";
}

function callMouseOut(){    
    document.getElementById("child").style.display = "none";    
}