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

Question

我正在使用Wordpress菜单,我有经典菜单和项目的子菜单.当我悬停一些有孩子的项目时,子菜单会显示.问题是,当我有一些当前页面然后li类是current-submenu-item并且项目底部有箭头.当我悬停另一个有子菜单(儿童)的项目时,我想在当前项目底部消失该箭头,当我取消它时,箭头将再次显示.

当前项目的类是这样的:

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

JsFiddle在这里.

我试过这样的事情:

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

但没有结果.我怎么能只用CSS做到这一点？

Answer 1

由于邻接选择器+(与通用邻接选择器完全相同~)仅适用于下一个兄弟,因此您需要通过:hover父级的状态来控制此行为ul,例如

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

所以,当你:hover的菜单则隐藏箭头,除非你也徘徊在.current-submenu-item项目

示例:http://jsfiddle.net/fozuu6hL/1/

作为旁注,您的示例只有在您悬停第一个list-item(如上所述)但您需要删除.前面的额外内容时才能工作li.