在不通过 jQuery/JavaScript 实际悬停的情况下对 HTML 元素产生悬停效果？

Question

我一直在尝试通过 jQuery/JavaScript 悬停一个 HTML 元素。

这里有一个<a>，上面写着“啤酒”。

当鼠标指针按以下方式悬停时，它会有一个下划线。

该行由:before 选择器创建。

我想知道是否可以使用 JS 悬停其中任何一个 <a>，以便在用户实际悬停的情况下悬停其中一个 <a>。

我们将不胜感激。

以防万一，这里是创建下划线的 CSS。这是我参考this tutorial制作的。

.nav-link{
    position: relative;
    text-decoration: none;
}

.nav-link:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.nav-link:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

Answer 1

您可以将它们设置为单独的类并使用.addClass()

.nav-link-hover {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

在你的 jQuery 中

$('.nav-link').addClass('nav-link-hover');