Javascript 鼠标悬停事件委托

Question

我有以下代码。 当 cursor 在链接上时，如何影响其他链接的状态？ 例如，我希望当鼠标悬停在一个链接上时，我可以影响其他链接的不透明度。 我想到了一种将事件添加到链接父导航链接的方法，然后检查事件是否真的在链接上或外部。

我开始的方法是好还是我应该处理事件委托

 const nav = document.querySelector(".nav__links"); const item = Array.from( document.querySelectorAll(".nav__item")); const link = Array.from( document.querySelectorAll(".nav__link")); link.forEach(t => t.addEventListener('mouseover',function(e){ const targetLink = e.target; console.log(targetLink); if ( t.==targetLink) { t.style.opacity = 0;2; } })) ;

 .nav__links { display: flex; align-items: center; list-style: none; justify-content:center; }.nav__item { margin-left: 0.7rem; }

 <ul class="nav__links"> <li class="nav__item"> <a class="nav__link" href="#">Home</a> </li> <li class="nav__item"> <a class="nav__link" href="#">About</a> </li> <li class="nav__item"> <a class="nav__link" href="#">Testimonials</a> </li>

Answer 1

如果您可以在鼠标悬停在导航列表上时使选项变暗，然后不使活动选项变暗，您可以使用 CSS 执行此操作（我添加了一些过渡，但您可以删除它）：

.nav__links:hover li {
    opacity: 0.2;
    transition: opacity 0.1s;
}
.nav__links:hover li:hover {
    opacity: 1;
}

现场示例：

 .nav__links { display: flex; align-items: center; list-style: none; justify-content: center; }.nav__links:hover li { opacity: 0.2; transition: opacity 0.1s; }.nav__links:hover li:hover { opacity: 1; }.nav__item { margin-left: 0.7rem; }

 <ul class="nav__links"> <li class="nav__item"> <a class="nav__link" href="#">Home</a> </li> <li class="nav__item"> <a class="nav__link" href="#">About</a> </li> <li class="nav__item"> <a class="nav__link" href="#">Testimonials</a> </li> </ul>

这还有一个优点，即当您将鼠标从一个导航项目移动到下一个导航项目时（离开一个li ，越过ul ，然后进入下一个li ），没有闪烁。

但是，如果您只想在其中一个导航项悬停时使它们变暗，我认为我们不能仅使用 CSS 来做到这一点，因为没有通用的兄弟组合器（只有下一个兄弟 [ + ] 或后续兄弟 [ ~ ]） .

但我们可以让 CSS 完成大部分工作。 诀窍是确保当鼠标不再位于任何导航项目上时我们取消暗淡的东西。 请记住，鼠标可以跳出元素（例如，如果用户Alt+Tab s 到另一个应用程序，移动鼠标，然后选项卡回到页面），所以我们必须相当积极地取消调暗的东西.

这是一个在document上使用被动mousemove处理程序的版本。 通常我会避免在document上使用mousemove处理程序，因为它会被触发很多，但是我们在处理程序中所做的非常快：

document.addEventListener("mouseover", event => {
    const li = event.target.closest(".nav__links li");
    if (li) {
        nav.classList.add("dimmed");
    } else {
        nav.classList.remove("dimmed");
    }
}, {passive: true});

然后我们向它扔一些 CSS ：

.nav__links.dimmed li {
    opacity: 0.2;
    transition: opacity 0.1s;
}
.nav__links.dimmed li:hover {
    opacity: 1;
}

现场示例：

 const nav = document.querySelector(".nav__links"); document.addEventListener("mouseover", event => { const li = event.target.closest(".nav__links li"); if (li) { nav.classList.add("dimmed"); } else { nav.classList.remove("dimmed"); } }, {passive: true});

 .nav__links { display: flex; align-items: center; list-style: none; justify-content: center; }.nav__links.dimmed li { opacity: 0.2; transition: opacity 0.1s; }.nav__links.dimmed li:hover { opacity: 1; }.nav__item { margin-left: 0.7rem; }

 <ul class="nav__links"> <li class="nav__item"> <a class="nav__link" href="#">Home</a> </li> <li class="nav__item"> <a class="nav__link" href="#">About</a> </li> <li class="nav__item"> <a class="nav__link" href="#">Testimonials</a> </li> </ul>