如何在鼠標懸停上顯示/隱藏div？

Question

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

我有這樣一個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";  
}