悬停子元素时保持父元素的悬停状态答案

【问题标题】：Keep hovering state of parent element when hovering child element悬停子元素时保持父元素的悬停状态
【发布时间】：2013-12-02 18:30:43
【问题描述】：

我的菜单是这样的：

<section class="top-bar-section">
 <ul class="left">
  <li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60"><a href="#">TopLevel Menu</a>
   <ul class="dropdown">
    <li class="menu-item menu-item-main-menu menu-item-misiuneviziune" id="menu-item-66"><a href="#">SubLevel Menu</a></li>
   </ul>
</ul>

当我将鼠标悬停在顶级菜单上时，会显示黑色箭头的 CSS

.top-bar-section .has-dropdown > a:hover:after{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: #000 transparent transparent transparent;
        border-top-style: solid;
        margin-top: 22px;
        z-index:999;
      }

当我悬停该菜单项的子元素时，如何使该箭头保持可见，因为现在只要我开始悬停子项，父项的箭头就会消失。

【问题讨论】：

我知道上面的标记缺少一些结束标签，在网站上这些标签就在那里。
菜单位于此处：asptmr.studyor.net 如果有帮助

标签： html css

【解决方案1】：

使用list-item 的悬停，即li:hover 来实现您要查找的内容，因为这将选择父级以使悬停在悬停时仅对子元素可见。

PS：您提供的上述标记是锯齿状的，不正确。您需要更正它以使代码正常工作。

【讨论】：

【解决方案2】：

改变

.top-bar-section .has-dropdown > a:hover:after{...}
.top-bar-section li a:hover, .top-bar-section .dropdown li a:hover{background:#c1212e;}

到

.top-bar-section .has-dropdown:hover > a:after {...}
.top-bar-section li:hover a, .top-bar-section .dropdown li:hover a{background:#c1212e;}

注意：

您的 HTML 标记中缺少结束标记。这是一种不好的做法。

DEMO here.

【讨论】：

@user2997903 你试过我的代码了吗？我通过检查元素更改了您的站点。它正在工作。
谢谢，我第一次尝试没有用，但我再次尝试并使用复制粘贴获取您的代码，现在可以正常工作了:)