Javascript onmouseover事件不工作_Javascript_Html

Javascript onmouseover事件不工作

javascript html

Javascript onmouseover事件不工作,javascript,html,Javascript,Html,我正在做一个简单的平视显示器，当你的鼠标在主面板上时，它会自动显示出来。由于某种原因，电话断断续续地不通。当我在面板上单击浏览器中的inspect元素时，它会显示html标记。我知道监听器是通过查看浏览器中的inspect元素创建的 <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <LINK href="stylesheet

我正在做一个简单的平视显示器，当你的鼠标在主面板上时，它会自动显示出来。由于某种原因，电话断断续续地不通。当我在面板上单击浏览器中的inspect元素时，它会显示html标记。我知道监听器是通过查看浏览器中的inspect元素创建的

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="mainpanel" class="notselectable">
        <div id="top">
            <img src="icons/white/open.png" style="float:right" class="btnMedia" />
        </div>
        <div id="bottom">
            <center>
                <img src="icons/white/pre.png" class="leftandright btnMedia" />
                <img src="icons/white/play.png" class="leftandright btnMedia" />
                <img src="icons/white/next.png" class="leftandright btnMedia" />
            </center>
        </div>
    </div>
</body>
<script>
    var panel = document.getElementById("mainpanel");
    var top = document.getElementById("top");
    var bottom = document.getElementById("bottom");
    //alert("script")
    panel.onmouseover = function() {
        alert("in")
        top.display = "block";
        bottom.display = "block";
    }
    panel.onmouseout = function() {
        alert("out")
        top.display = "none";
        bottom.display = "none";
    }
</script>
</html>


你好，世界！
var面板=document.getElementById（“主面板”）；
var top=document.getElementById（“top”）；
var bottom=document.getElementById（“bottom”）；
//警报（“脚本”）
panel.onmouseover=函数（）{
警报（“in”）
top.display=“block”；
bottom.display=“block”；
}
panel.onmouseout=函数（）{
警报（“退出”）
top.display=“无”；
bottom.display=“无”；
}

您的代码中有两处错误

使用CSS值操作时缺少

样式

而

top

是JavaScript中的一个变量，很难将其用作变量

这项工作：

var panel=document.getElementById（“主面板”）；
var top2=document.getElementById（“top”）；
var bottom=document.getElementById（“bottom”）；
panel.onmouseover=函数（）{
top2.style.display=“块”；
bottom.style.display=“block”；
}
panel.onmouseout=函数（）{
top2.style.display=“无”；
bottom.style.display=“无”；
}

#主面板{
背景：#美国联邦航空局；
高度：100vh；
}
#上，#下{
显示：无；
}


你好，世界！
我是最棒的！
我是底部！

top.style.display=“block”进行此更改everywhere@RajaprabhuAravindasamy没什么变化：哦