Question

我有一个自动生成树的程序。它看起来像

<li class="linamesystem">Alternator</li>
   <ul class="boxfornamegroupsparts">
      <li class="linamegroup"><a href="#top(1)">Alternator2</a></li>
      <li class="linamegroup"><a href="#top(2)">Krmilnik alternatorja (regler)</a></li>
  </ul>

Alternator -> Alternator2
           ->Krmilnik

悬停Alternator父级并显示linamegroup个孩子的css代码是什么？

或者我应该用javascript做什么？

Answer 1

这可能是要使用的CSS规则：

.boxfornamegroupsparts {
   display: none;
}

.linamesystem:hover + .boxfornamegroupsparts {
    display: block;
}

编辑：正如 Paulie_D 所指出的，这是无效的HTML标记，ul不能/不应该是其他ul元素的直接子代。

Answer 2

这可能只是你拥有的一段代码。真正的应该是这样的：

<ul>
<li></li>
<li>
   <ul>
     <li></li>
   </ul>
</li>
</ul>

无论如何要实现你想做的事，只需使用这个css：

.linamesystem:hover .boxfornamegroupsparts {
  display:block;
}

Answer 3

我为您创建了一个类似的jsfiddle，说明了一个带子菜单的水平菜单。诀窍是最初隐藏 linamegroup 并在 linamesystem 悬停时显示它。

Prototypical Inheritance and Angular $scope and $rootScope

隐藏css中的菜单项

3 个答案: