Whenever I hover over a specific box, detailed information appears, and when I move the mouse away, the details disappear.
HTML
<nav>
<div>
<div class="nav-container">
<a href="./about.html"><div class="nav-box">ABOUT</div></a>
<a href="./publication.html"><div class="nav-box" id="publication-box">PUBLICATION</div></a>
<a href="./members.html"><div class="nav-box">MEMBERS</div></a>
</div>
<div id="publication-detail">
<div id="international-publication"><a id="desc" href="./international_pub.html">international publication</a></div>
<div id="domestic-publication"><a id="desc" href="./domestic_pub.html">domestic publication</a></div>
</div>
</div>
</nav>
CSS
.show {
visibility: visible;
}
#publication-detail {
margin: 2px 0 0 283px;
visibility: hidden;
}
Javascript
const publication = document.getElementById("publication-box");
const publication_detail = document.getElementById("publication-detail");
function showDetail() {
publication_detail.classList.add("show")
}
publication.addEventListener("mouseover", showDetail);
Even though I trigger the show class for publication_detail upon hovering over the publication box,
I am unable to view the publication-detail. How can I remedy this?