关于 Stack Overflow 的第一个问题,关于 Vanilla Javascript。
我在一个无序列表中有四个链接。我使用 forEach 在每个 <li>
上设置了一个鼠标悬停事件。
当我将鼠标悬停在该元素上时,我向该元素添加了一个 css 伪类 ::after
,它会在悬停的元素下方显示一个小的 css 矩形。
当我将鼠标直接向下移离元素并移出 <ul>
时,::after
的 Css 伪类被删除并且矩形消失,这正是我想要的。除非我将鼠标直接从一个链接元素移动到另一个元素的左侧或右侧,否则前一个链接元素的 css 伪类 ::after
仍然存在,因此正方形仍然存在。
下面是一些示例代码。任何见解将不胜感激。
navigationMouseOver();
function navScroll() {
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop > 100) {
document.querySelector(".contact-info2").classList.add("visible");
} else {
document.querySelector(".contact-info2").classList.remove("visible");
}
})
}
function navigationMouseOver() {
let navLi = document.querySelectorAll(".link");
navLi.forEach(function(element) {
element.addEventListener("mouseover", function(e) {
let link = e.currentTarget;
let linkText = e.currentTarget.textContent;
console.log(linkText);
const subMenu = document.querySelector(".sub-menu");
const arrow = document.querySelector(".arrow");
let elementPos = link.getBoundingClientRect();
let elementTop = elementPos.top - 50;
let elementWidth = elementPos.width;
let elementBottom = elementPos.bottom - 10;
let elementCenter = (elementPos.left + elementPos.right) / 2;
let trueCenter = elementCenter - elementWidth;
let arrowW = arrow.clientWidth;
let arrowCenter = elementCenter - arrowW;
element.classList.add("after");
subMenu.classList.add("show");
arrow.style.bottom = `${elementBottom} px`
arrow.style.left = `${arrowCenter}px`
subMenu.style.top = `${elementBottom}px`;
subMenu.style.left = `${trueCenter}px`;
subMenu.innerHTML = "Hallo";
navMouseOver(element)
})
})
}
function navMouseOver(element) {
let subMenu = document.querySelector(".sub-menu")
let banner = document.querySelector(".banner");
banner.addEventListener("mouseover", function(e) {
if (!e.target.classList.contains("link")) {
subMenu.classList.remove("show");
element.classList.remove("after");
}
})
}
.banner-nav li.after::after {
content: "";
display: block;
position: absolute;
background: white;
height: 30px;
width: 30px;
top: - 20px;
left: 40%;
}
<section class="banner">
<div class="banner-logo">
<h1 class="logo-text"> Logo</h1>
</div>
<div class="banner-nav ">
<ul class="nav-ul ">
<a href="#"></a>
<li class="link"> Gallery </li>
</a>
<a href="#">
<li class="link"> Products</li>
</a>
<a href="#">
<li class="link"> About </li>
</a>
<a href="#">
<li class="link"> Contact </li>
</a>
</ul>
</div>
<div class="arrow"></div>
<div class="sub-menu"></div>
</section>
答案 0 :(得分:1)
您不需要为此使用 JavaScript。您可以像这样将 :hover
伪类与 ::after
结合使用:
.banner-nav li:hover::after {}
.banner-nav li:hover::after {
content: "";
display: block;
position: absolute;
background: white;
height: 30px;
width: 30px;
top: - 20px;
left: 40%;
border: 1px solid;
}
<section class="banner">
<div class="banner-logo">
<h1 class="logo-text"> Logo</h1>
</div>
<div class="banner-nav ">
<ul class="nav-ul ">
<a href="#"></a>
<li class="link"> Gallery </li>
</a>
<a href="#">
<li class="link"> Products</li>
</a>
<a href="#">
<li class="link"> About </li>
</a>
<a href="#">
<li class="link"> Contact </li>
</a>
</ul>
</div>
<div class="arrow"></div>
<div class="sub-menu"></div>
</section>