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

概述我正在使用Wordpress菜单,我有经典菜单和项目的子菜单.当我悬停一些有孩子的项目时,子菜单会显示.问题是当我有一些当前页面时,li class是current-submenu-item并且在项目底部有箭头.当我悬停另一个有子菜单(儿童)的项目时,我想在当前项目底部消失该箭头,当我取消它时,箭头将再次显示. 当前项目的类是这样的： li.current-submenu-item a:after 我正在使用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/

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

总结

以上是内存溢出为你收集整理的html – CSS – 将一个项目悬停并删除另一个项目的内容全部内容，希望文章能够帮你解决html – CSS – 将一个项目悬停并删除另一个项目的内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。