鼠标悬停弹出消息

试图让一个简单的弹出出现在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

鼠标悬停弹出消息

回答

相关问题