CSS

Question

我正在使用 Wordpress 菜单，其中有 classic 菜单和项目的子菜单。当我悬停某些具有 children 的项目时，将显示子菜单。问题是当我有一些当前页面然后 li class 是 current-submenu-item 并且在项目底部有箭头。当我悬停另一个有子菜单的项目时 (children) 我想消失当前项目底部的箭头，当我取消悬停它时箭头将再次显示。

当前项目的class是这样的：

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 兄弟，您需要通过以下方式控制此行为您的 parent 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 前面的额外 . .

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

CSS - hover one item and remove content of another item

html

hover

css-selectors