I am trying to implement a timeline where hovering over a specific point triggers a display showing more information about that particular historical event. Despite seeming like a simple task, I am struggling to get it to function properly. As a newcomer to javascript, I'm having difficulty identifying what I might be doing wrong. Any guidance or assistance would be greatly 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");
});