Question

尝试在mouseover 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中的类（。是类，＃是id），第二，您不需要重载CSS显示无样式。最后，在这种情况下，您不需要JavaScript。

参见工作示例。

＆＃13;

<!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>

＆＃13;

在mouseover div上弹出消息

1 个答案: