作者:维他柠檬鱼1949 | 来源:互联网 | 2023-05-23 13:27
我正在使用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做到这一点?
1> fcalderan..:
由于邻接选择器+
(与通用邻接选择器完全相同~
)仅适用于下一个兄弟,因此您需要通过: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
.