javascript - 时间线效果的 Javascript 不起作用

Question

我正在尝试创建一个时间线，当您将鼠标悬停在某个部分上时，会弹出一个显示有关历史特定部分的信息的显示。这似乎是一项简单的任务，但我无法让它发挥作用。我是 javascript 新手，我无法弄清楚我做错了什么。任何建议或帮助将不胜感激。

<div class="line"></div>
<div class="circle"> </div>
<div class="popup display"></div>

html { 
width: 100%;
height: 400px;
}

.line {
  width: 90%;
  height: 5px;
  background-color: black;
  position: absolute;
  top: 12%;
  left: 5%;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 10%;
}

.popup {
  position: absolute; 
  width: 70%;
  height: 400px;
  background-color: black;
  top: 70%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.display {
  opacity: 0;
}


document.querySelector(".circle").addEventListener("mouseover", function(){
  document.querySelector(".popup").classList.remove("display");
});

标签： javascripthtmlcss

Answer 1

在这里看到这个小提琴：http: //jsfiddle.net/chr7p94q/

我添加了 mouseout，因此当您将鼠标从元素上移开时它会消失。

document.querySelector(".circle").addEventListener("mouseout", function(){
  document.querySelector(".popup").classList.add("display");
});

似乎以下 for 的.display行为方式相同，而不是使用opacity：

.display {
  display: none;
}