时间戳

首页 > 解决方案 > 将鼠标悬停在父项上并显示子项

css - 将鼠标悬停在父项上并显示子项

问题描述

我有一个显示第一层子菜单的动态大型菜单，但我试图让它在第一层中的元素悬停时显示第二层。目前这两个层次和显示都占用了大量空间。

我在这里找到了一个帖子说要使用这种布局：

.child{ display:none; }
.parent:hover .child{ display:block; }

我拥有的 css 有点棘手：

child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent =  .dropdown-menu.burt .new-menu .dropdown-submenu > a

我试过这个，但它不工作：

.new-menu .dropdown-submenu .dropdown-menu.burt{
    display: none;
}
.dropdown-menu.burt .new-menu .dropdown-submenu > a:hover .new-menu .dropdown-submenu .dropdown-menu.burt  {
    display: block; 
}

针对这些特定元素似乎很棘手，而我能专门获得它们的唯一方法就是我上面的混乱。也许我可以以更好的方式来定位这些元素，或者以另一种方式来完成这项工作？

更新

这是 html 结构，这是一种技巧，它来自 Americommerce，它使用提供动态数据的“合并代码”

这是主要结构：

<ul class="nav navbar-nav">
          <ac:layoutarea id="Item">
            <ac:visibilityarea id="phDDLink">
              <li class="dropdown">
                <a href="#" target="$$TARGET$$">$$TEXT$$</a>
                <ac:visibilityarea id="phSubMenu">

                  <ul class="dropdown-menu mm2">
                    <div class="row"> $$SUBMENU$$</div>
                  </ul>

                </ac:visibilityarea>
              </li>
            </ac:visibilityarea>
            <ac:visibilityarea id="phNoDDLink">
              <li>
                <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
              </li>
            </ac:visibilityarea>
          </ac:layoutarea>

        </ul>

这是子菜单的结构：

<ac:layoutarea id="SubItem">

      <ac:visibilityarea id="phDDLink">
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> 
          <li class="dropdown-submenu">
            <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
            <ac:visibilityarea id="phSubMenu">
              <ul class="dropdown-menu burt" id="">$$SUBMENU$$</ul>

            </ac:visibilityarea>
          </li>
        </div>
      </ac:visibilityarea>
      <ac:visibilityarea id="phNoDDLink">

        <li class="greg">
          <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
        </li>

      </ac:visibilityarea>

    </ac:layoutarea>

更新 2

来自检查员的 HTML

<ul class="dropdown-menu mm2">
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
        <li class="dropdown-submenu"> <a  class="sub-link" href="/store/c/software.aspx" target="">Software</a>
            <ul class="dropdown-menu burt">
                <div class="new-menu">
                    <li class="dropdown-submenu"> <a href="/office-2019.aspx" target="">Products</a>
                        <ul class="dropdown-menu burt">
                            <li class="greg"> <a href="/product1.aspx" target="">Product 1</a> </li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>
    </div>
</ul>

更新 3

我在第一个类中添加了一个类<a>，然后添加了这个 css：

.new-menu .dropdown-submenu .dropdown-menu.burt {
    display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
    display: block;

}

它隐藏了元素，但在悬停时显示它们仍然不起作用

.sub-link{
  display: block;
}

.new-menu{
  display: none;
}

.greg
{
  display: none;
}
<li class="dropdown-submenu"> <a  class="sub-link" href="/store/c/software.aspx" target="">Software</a>
            <ul class="dropdown-menu burt">
                <div class="new-menu">
                    <li class="dropdown-submenu"> 
                    <a href="/office-2019.aspx" target="">
                      Products
                    </a>
                        <ul class="dropdown-menu burt">
                            <li class="greg">
                            <a href="/product1.aspx" target="">Product 1
                            </a> 
                            </li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>

标签： css

解决方案

您的 HTML 结构不清楚，所以我尝试创建自己的并尝试重新创建您的问题

看一看

.new-menu{
  display: none;
}

.dropdown-submenu{
   display: none;
}

.dropdown-menu{
  display: none;
}

.mainParent:hover .new-menu{
  display: block;
}


.mainParent:hover .dropdown-submenu{
  display: block;
}

.mainParent:hover .dropdown-menu{
  display: block;
}
<a class="mainParent"> 
  Link
  <div class="new-menu">
    <div class="dropdown-submenu">
      <div class="dropdown-menu burt">
        Application Menu
      </div>
    </div>
  </div>
</a>

如果每个元素都有要隐藏的属性，那么每个元素类都必须在父元素悬停时显示。

如果您遇到某种嵌套的 DOM CSS 问题，您可以查看此运行代码片段

.sub-link{
  display: block;
}

.new-menu{
  display: none;
}

.greg
{
  display: none;
}

.dropdown-submenu:hover a{
  color: red !important;
}

.dropdown-submenu:hover .burt{
  display: block;
  color: red !important;
}

.dropdown-submenu:hover .new-menu{
  display: block;
  color: red !important;
}

.new-menu:hover .burt{
  display: block;
}

.new-menu:hover .greg{
  display: block;
}
.new-menu:hover a{
  display: block;
  color: black !important;
}
<li class="dropdown-submenu"> <a  class="sub-link" href="/store/c/software.aspx" target="">Software</a>
            <ul class="dropdown-menu burt">
                <div class="new-menu">
                    <li class="dropdown-submenu"> 
                    <a href="/office-2019.aspx" target="">
                      Products
                    </a>
                        <ul class="dropdown-menu burt">
                            <li class="greg">
                            <a href="/product1.aspx" target="">Product 1
                            </a> 
                            </li>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>

推荐阅读