我正在尝试创建一个时间轴,当您将鼠标悬停在某个部分时,会弹出一个显示,显示有关该特定历史部分的信息。这似乎是一项简单的任务,但我无法让它工作。我是 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");
});
最佳答案
在这里查看这个 fiddle :http://jsfiddle.net/chr7p94q/
我添加了 mouseout,因此当您将鼠标移离元素时它会消失。
document.querySelector(".circle").addEventListener("mouseout", function(){
document.querySelector(".popup").classList.add("display");
});
似乎下面的 .display
行为方式与使用 opacity
相同:
.display {
display: none;
}
关于用于时间轴效果的 Javascript 将不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54185219/