onmouseover事件不起作用

onmouseover event not working

本文关键字：不起作用 事件 onmouseover      更新时间：2024-01-30

我制作了一个简单的hud，当你的鼠标在主面板上时，它会显示出来。由于某种原因，房子里到处都是不工作的。当我在面板上的浏览器中单击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>

您的代码中有两处错误。

  1. 使用CSS值进行操作时缺少style
  2. top是JavaScript中的一个保留关键字，将其用作变量很难

这项工作：

var panel = document.getElementById("mainpanel");
var top2 = document.getElementById("top");
var bottom = document.getElementById("bottom");
panel.onmouseover = function() {
    top2.style.display = "block";
    bottom.style.display = "block";
}
panel.onmouseout = function() {
    top2.style.display = "none";
    bottom.style.display = "none";
}
#mainpanel {
  background: #faa;
  height: 100vh;
}
#top, #bottom {
  display: none;
}
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <div id="mainpanel" class="notselectable">
        <div id="top">
          I am top!
        </div>
        <div id="bottom">
          I am bottom!
        </div>
    </div>
</body>
</html>

相关文章：