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

我一直在尝试通过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);
}

最佳答案

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

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

并在您的jQuery中

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

关于javascript - 在HTML元素上具有悬停效果而不实际通过jQuery/JavaScript悬停吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53567477/