javascript - 隐藏和显示 :before thru Jquery or better solution?

Question

好吧，这让我发疯。我们安装了一个 WP 插件来创建一个“Mega Menu”。现在，每个菜单上的悬停底部箭头在应用了此大型菜单的菜单(“连接”和“资源”)上受到影响。最初，它被放置在菜单的中间，但由于 Mega Menus 使用了全宽，所以这个位置被搞砸了。因此，我隐藏了原来的“箭头”并使用 a:before 创建了另一个指向两个大型菜单链接(“连接”和“资源”)的箭头。这是开发环境的链接:

(链接)(主菜单)

我的问题:是否可以使用 pseudos (:before) 来隐藏/显示或更改边框底部的颜色？每次显示子菜单时，我都可以更改颜色。

如果我正在尝试的解决方案不可行，我将不胜感激任何其他解决方案的帮助或建议。

另外，如果你想让我回到最初的问题，请告诉我，以防你认为你可以在没有我的情况下找到更好的主意。

谢谢!

Answer 1

我没有测试过，但是是这样的。

a:first-child:before {
    left: 50%;
    top: 9.5px;
    margin: 0px 0px 0px -10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #fff;
    content: " ";
    pointer-events: none;
    position: relative;
    bottom: auto;
    opacity: 0; /* here */
}

a:hover:first-child:before { /*hover*/
    opacity: 1;
}

li.megamenu:hover > a:first-child:before {
    opacity: 1;
}