Question

好的，这让我发疯了。我们安装了WP插件来创建“Mega菜单”。现在，每个菜单上的悬停底部箭头都会受到应用此大型菜单的菜单的影响（“连接”和“资源”）。最初，它被放置在菜单的中间，但由于Mega Menus使用全宽，因此位置变得紧张。因此，我隐藏了原始的“箭头”并使用：之前创建了另一个：两个超级菜单链接（“连接”和“资源”）。以下是开发环境的链接：

（链接）（主菜单）

我的问题：是否可以使用pseudos（：之前）隐藏/显示或边框底部颜色变化？每次显示子菜单时我都可以更改颜色。

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

另外，如果您希望我恢复到最初的问题，请告诉我，以防您认为可以在我的情况下找到更好的想法。

谢谢！

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;
}

隐藏和显示：在通过Jquery或更好的解决方案之前？

1 个答案: