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

Question

可能重复：
How to show/hide a div on mouseover using jquery?如何在鼠标悬停上显示/隐藏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

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

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

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

Answer 3

如何添加CSS？

#parent #child {显示：无;}

#parent：悬停#child {显示：块;}

与

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

Answer 4

可以尝试.hover（）之类这，

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

Answer 5

不要使用切换功能！

尝试这样：

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

} ）

这也许应该工作！

Answer 6

短：

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

Demo.

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

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