Question

可能重复：
How to show/hide a div on mouseover using jquery?

我有这样的div：

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

我希望每当有人将鼠标移到child div上时显示parent 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 {display：none;}

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

Demo.

注意：您可以将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";    
}

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

8 个答案: