[英]Javascript for timeline effect will not work
I am trying to create a timeline that when you hover on a certain part, a display pops up displaying information about that specific part of the history. 我正在尝试创建一个时间轴,当您将鼠标悬停在某个部分时,会弹出显示有关该历史特定部分的信息。 This seems like a simple task but I cannot get it to work. 这似乎是一个简单的任务,但我无法使其正常工作。 I am new to javascript and I cannot figure out what I am doing wrong. 我是javascript新手,无法弄清楚自己在做什么错。 Any advice or help would be appreciated. 任何建议或帮助,将不胜感激。
<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");
});
See this fiddle here: http://jsfiddle.net/chr7p94q/ 在这里看到这个小提琴: http : //jsfiddle.net/chr7p94q/
I added the mouseout so it goes away when you move the mouse off of the element. 我添加了mouseout,因此当您将鼠标移出元素时它会消失。
document.querySelector(".circle").addEventListener("mouseout", function(){
document.querySelector(".popup").classList.add("display");
});
Seems like the following for .display
would behave the same way rather than using opacity
: 似乎如下所示.display
行为方式相同,而不是使用opacity
:
.display {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.