Javascript 鼠标悬停div上的弹出消息_Javascript_Html_Mouseover

Javascript 鼠标悬停div上的弹出消息

javascript html

Javascript 鼠标悬停div上的弹出消息,javascript,html,mouseover,Javascript,Html,Mouseover,试图在mouseoveradiv上显示一个简单的弹出窗口，我按照答案进行操作，但不起作用。我错过了什么 <!DOCTYPE html> <head> <style> .parent .popup { display: none; } .parent:hover .popup { display: block; } </style> </head> <body> <

试图在

mouseover

div

上显示一个简单的弹出窗口，我按照答案进行操作，但不起作用。我错过了什么

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


.parent.popup{
显示：无；
}
.parent:悬停。弹出窗口{
显示：块；
}
var e=document.getElementById（'#parent'）；
e、 onmouseover=函数（）{
document.getElementById（'popup'）.style.display='block'；
}
e、 onmouseout=函数（）{
document.getElementById（'popup'）.style.display='none'；
}
这是主容器。
这里有一些文字

有几个问题。您正在CSS中引用类（.is class和#is id）。其次，您不需要重载CSS display none样式。最后，在本例中不需要JavaScript

请参见工作示例


#父窗口{
显示：无；
}
#父项：悬停#弹出{
显示：块；
}
这是主容器。
这里有一些文字

关于已接受答案的评论提到了问题，您需要使用ID选择器，而不是类选择器。这里的答案还告诉你，如果你使用CSS，就不需要JS