我正在使用 Wordpress 菜单,其中有经典菜单和元素的子菜单。当我悬停一些有 child 的元素时,子菜单就会显示出来。问题是当我有一些当前页面时 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");
}
我试过这样的:
li.menu-item-has-children:hover + .li.current-submenu-item a:after {
content:"";
}
但没有结果。我怎样才能只使用 CSS 来做到这一点?
最佳答案
由于邻接选择器 +
(与一般的邻接选择器 ~
完全一样)仅适用于 next sibling,因此您需要控制此行为通过你父级 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");
}
因此,当您:hover
菜单时然后 隐藏箭头除非您还悬停在.current-submenu-item
元素
示例:http://jsfiddle.net/fozuu6hL/1/
作为旁注,您的示例只有在您将鼠标悬停在第一个 list-item
(如上所述)时才能工作,但您需要删除前面的额外 .
li
.
关于html - CSS - 悬停一个元素并删除另一个元素的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28339168/