javascript - 用鼠标悬停关闭一个框

Question

我创建了这个盒子。当我将鼠标悬停在仍然可见的部分上时，我希望此框打开。现在，当我将鼠标悬停时，什么也没有发生。我认为错误必须是JS文件。调用该函数没问题，因为如果放置一个

alert("test")

在关闭框功能中，除框外一切正常。

HTML:

<div class="box" onmouseover="boxclose();">
  <h4 class="AlarmHeader"> Alarm Times!</h4>
</div>

CSS:

.box{
  height: 150px; width: 400px;
  background-color:black;
  border-radius: 20px 20px 0 0;
  padding: 5px;
  position:fixed;
  bottom:-100px;
  right:5px;

JS:

function boxclose() {
  document.getElementsByClassName("box").style.bottom="0px"
}

有用的链接:https://www.w3schools.com/cssref/pr_pos_bottom.asp

Answer 1

您正在使用 getElementsByClassName，它返回一个列表而不是一个元素，因此您只需告诉它要定位哪个元素:

document.getElementsByClassName("box")[0].style.bottom="0px"

工作示例:

function boxclose() {
  document.getElementsByClassName("box")[0].style.bottom="0px"
}

.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;

<div class="box" onmouseover="boxclose();">
  <h4 class="AlarmHeader"> Alarm Times!</h4>
</div>