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

我正在使用wordpress菜单,我有经典菜单和项目的子菜单.当我悬停一些有孩子的项目时,子菜单会显示.问题是当我有一些当前页面时,li class是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 here.

我试过这样的事情：

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

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

解决方法

由于邻接选择器(与通用邻接选择器〜完全相同)仅适用于下一个兄弟,因此您需要通过父UI的：悬停状态来控制此行为,例如：

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

所以当你：将鼠标悬停在菜单上然后隐藏箭头,除非你还在盘旋.current-submenu-item项目

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

作为旁注,您的示例只有在您悬停第一个列表项(如上所述)时才能工作,但您需要删除额外的.在李的面前.