Html CSS-悬停一个项目并删除另一个项目的内容

我正在使用Wordpress菜单，其中有经典菜单和项目的子菜单。当我将鼠标悬停在某个有子项的项目上时，子菜单将显示。问题是当我有一些当前页面时，

li

类是

当前子菜单项

，并且在项的底部有箭头。当我将鼠标悬停在另一个有子菜单（子菜单）的项目上时，我想将箭头消失在当前项目的底部，当我取消悬停时，箭头将再次显示

当前项目的类别如下所示：

li.current-submenu-item a:after {
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    content: url("http://elvis.zitnikcreative.cz/wp-content/themes/elvis_theme/img/menu_aktivni_sipka.png");
}

我试过这样的方法：

li.menu-item-has-children:hover + .li.current-submenu-item a:after {
    content:"";
}

---

但没有结果。如何仅使用CSS才能做到这一点？

由于邻接选择器

+

（与常规邻接选择器

~

）仅适用于下一个兄弟姐妹，因此您需要通过父级

ul

的

：hover

状态来控制此行为，例如

ul:hover li.current-submenu-item a:after {
    content:"";
}
ul:hover li.current-submenu-item:hover a:after {
    content:url("http://.../menu_aktivni_sipka.png");
}

因此，当您

：悬停

时，菜单将隐藏箭头，除非您同时悬停在

当前子菜单项

项上

例如：

---

---

作为旁注，您的示例仅在您将第一个

列表项

（如上所述）悬停时有效，但您需要删除

li

前面的额外

，
，
谢谢，并且当我只想为有子项的项目取消箭头时？（李类菜单项有子项）你是说当你将人悬停时，箭头应该在卡片上可见吗？对，可能吗？