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 here。

我试过这样的事情：

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

但没有结果。我怎么能只使用CSS呢？

Answer 1

由于邻接选择器+（与通用邻接选择器~完全相同）仅适用于 next 兄弟，因此您需要通过{{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项目

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

作为旁注，您的示例只有在您悬停第一个.current-submenu-item时（如上所述）才有效，但您需要删除list-item前面的额外.。< / p>

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

1 个答案: