单击后如何保持链接悬停动画？

html5 • • 问答

我试图在点击后保持链接悬停效果。这是我目前拥有的：

HTML：

    <div class="nav-desktop">
        <ul class="desktop-list">
            <li class="desktop-link"><a class="link is-active" href="index.html">Home</a></li>
            <li class="desktop-link"><a class="link" href="html/about.html">About</a></li>
            <li class="desktop-link"><a class="link" href="html/blog.html">Blog</a></li>
            <li class="desktop-link"><a class="link" href="html/projects.html">Projects</a></li>
            <li class="desktop-link"><a class="link" href="html/contact.html">Contact</a></li>
        </ul>
    </div>

CSS：

.link {
    color: var(--dracula-pink);
    padding: 5px 5px 5px 5px;
    margin-right: 5rem;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
}

.link:hover {
    background-repeat: repeat-x;
    background-position: left 0% bottom -5%;
    background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
    background-size: 100% 18%;
    transition: ease-in 0.2s;
}

.link.is-active {
    background-repeat: repeat-x;
    background-position: left 0% bottom -5%;
    background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
    background-size: 100% 18%;
}

JS：

const link = document.querySelector(".link");
link.addEventListener("click", toggleActive);

function toggleActive() {
    link.classList.toggle("is-active");
};

我知道我将不得不添加一些东西来消除上一个链接的影响，但在我能想到的每一个变化之后，我什至无法把这部分放下。

回答

您正在使用el.querySelector()which 只会返回找到的第一个匹配元素。您需要获取元素选择器的整个nodeList，使用el.querySelectorAll()然后通过循环运行nodeList并将您的函数放在eventListener 中。由于您要删除活动类，因此有多种方法可以执行此操作。我做到了，通过简单地使用所有元素中取出el.forEach循环，然后设置班级列表上的event.target事件与功能。

您可以使用条件来检查哪个元素具有活动类，然后也可以在单击时切换/删除它，但这会在您的函数中添加更多代码。

编辑：一旦 href 将它们发送到该页面，OP 想要确定在另一个页面上按下了哪个链接。在这种情况下，不需要 JS，只需在该页面 HTML 内的相应页面按钮中静态设置类。

如果你真的想使用 JS，你可以id在每个页面的 body 标签中添加一个，即在联系页面上 --><body>与每个导航页面链接按钮的 textContact 相对应。然后使用 JS，去掉 eventListener，只需在 nodeList 上的循环中查找body.id，如果它等于link.textContent，则设置活动类。

links.forEach(link => document.body.id === link.textContent ? link.classList.add("is-active") : null)

用户点击About上about.html

^^^^^^^^^^^^^^^^^^^^^

links.forEach(link => document.body.id === link.textContent ? link.classList.add("is-active") : null)

这是原始问题的答案：

<li class="desktop-link is-active"><a class="link" href="html/about.html">About</a></li>

//--> you need to get all the elements in the nodeList 
//--> with the class .link --> querySelectorAll()
const links = document.querySelectorAll(".link");
//--> loop over these elements and add the eventListener 
links.forEach(link => document.body.id === link.textContent ? link.classList.add("is-active") : null)
.link {
  color: var(--dracula-pink);
  padding: 5px 5px 5px 5px;
  margin-right: 5rem;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
}

.link:hover {
  background-repeat: repeat-x;
  background-position: left 0% bottom -5%;
  background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
  background-size: 100% 18%;
  transition: ease-in 0.2s;
}

.link.is-active {
  background-repeat: repeat-x;
  background-position: left 0% bottom -5%;
  background-image: linear-gradient(90deg, rgba(139, 233, 253, 1) 0%, rgba(189, 147, 249, 1) 50%, rgba(80, 250, 123, 1) 100%);
  background-size: 100% 18%;
}

以上是单击后如何保持链接悬停动画？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>