在HTML元素上具有悬停效果而不实际通过jQuery / JavaScript悬停吗？

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');