鼠標懸停彈出消息

試圖讓一個簡單的彈出出現在mouseover a div我跟着答案Description Box using "onmouseover"，但它不起作用。我錯過了什麼？鼠標懸停彈出消息

<!DOCTYPE html> 
<head> 
<style> 
    .parent .popup { 
     display: none; 
    } 
    .parent:hover .popup { 
     display: block; 
    } 
</style> 
</head> 

<body> 
<script type="text/javascript"> 
    var e = document.getElementById('#parent'); 
    e.onmouseover = function() { 
     document.getElementById('popup').style.display = 'block'; 
    } 
    e.onmouseout = function() { 
     document.getElementById('popup').style.display = 'none'; 
    } 
</script> 


<div id="parent"> 
    This is the main container. 
    <div id="popup" style="display: none">some text here</div> 
</div> 

</body> 
</html>

來源

2016-02-12 RGriffiths

有指問題上接受答案的評論，您需要使用ID選擇不類的。另外，那裏的答案告訴你，如果你使用CSS，則不需要JS –

有幾個問題。你正在引用CSS中的類（.class和＃是id），你不需要重載CSS display none樣式。最後，在這種情況下，你不需要JavaScript。

查看工作示例。

<!DOCTYPE html> 
 
<head> 
 
<style> 
 
    #parent #popup { 
 
     display: none; 
 
    } 
 
    #parent:hover #popup { 
 
     display: block; 
 
    } 
 
</style> 
 
</head> 
 

 
<body> 
 

 

 
<div id="parent"> 
 
    This is the main container. 
 
    <div id="popup">some text here</div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-02-12 02:03:52 Jared

鼠標懸停彈出消息

回答

相關問題