如何在鼠标悬停时显示/隐藏div？ [英] How to show/hide a div on mouseover?

问题描述

可能重复：

如何使用jquery在鼠标悬停时显示/隐藏div？

我有这样的div：

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

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

I want to have the child div shown whenever someone moves their mouse over the parent div, and when he moves his mouse away, to hide the parent div.

但是，如果我这样做：

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

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

Then both events seem to get called twice each time i move my mouse over the #parent div. How can I achieve what I want?

推荐答案

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

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

这篇关于如何在鼠标悬停时显示/隐藏div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！