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

Posted 2023-03-06

【中文标题】CSS - 悬停一个项目并删除另一个项目的内容

【英文标题】：CSS - hover one item and remove content of another item

【发布时间】：2015-04-05 00:36:05

【问题描述】：

我正在使用 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 来做到这一点？

【参考方案1】：

由于邻接选择器 +（与一般邻接选择器 ~ 完全相同）仅适用于 next 兄弟，因此您需要通过父 @ 的 :hover 状态来控制此行为987654325@，例如

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 前面的额外 .。

【讨论】：

谢谢，当我想只为有孩子的项目消失箭头时？ (li class menu-item-has-children)

您是说当您将鼠标悬停在 person 时，箭头应该在 cards 上可见？

对，有可能吗？