鼠标悬停时弹出消息 div

Question

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

Answer 1

有一些问题。您在 CSS 中引用 classes（. 是 class 并且 # 是 id）其次，您不需要重载 CSS 显示 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>

鼠标悬停时弹出消息 div

Pop up message on mouseover div

html

javascript

mouseover