Question

我做了一个简单的hud，当你的鼠标在主面板上时它应该显示出来。由于某种原因，onmouseover和out不工作。当我在面板上的浏览器中单击inspect元素时，它会显示html标记。我知道通过查看浏览器中的inspect元素创建了监听器。

_create

Answer 1

您的代码中有两个问题。

使用CSS值进行操作时缺少style
top是JavaScript中的reserved keyword，将其用作变量很棘手

这有效：

＆＃13;

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";
}

＆＃13;

#mainpanel {
  background: #faa;
  height: 100vh;
}
#top, #bottom {
  display: none;
}

＆＃13;

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

＆＃13;

onmouseover事件不起作用

1 个答案: