Question

我有HTML / CSS的问题。我试图做一个下拉菜单扩展的鼠标悬停和colapses鼠标移开时。但是li元素会忽略hide（不显示）类。

我的html部分：

  <ul id="dropDownBar" class="hideList">
     <li id="preschool" class="hide">Pradine</li>
     <li id="middleschool" class="hide">Pagrindine</li>
     <li id="highschool" class="hide">Abiturientai</li>
     <li id="grownups" class="hide">Suauge</li>
     <li id="conferences" class="hide">Konferencijos</li>
     <li id="other" class="hide">Teminiai</li>
  </ul><!--end of dropDownBar-->

在CSS中，有hideList和showList类，它们将dropDownBar的高度从0更改为具有过渡效果的扩展菜单的高度。所以这似乎做工精细。但是，在上面我想使它李元素出现和消失的dropDownBar的扩大，colapsing。

所以li元素的首字母应该是不可见的，并在将鼠标悬停在dropDownBar上之后出现。

.hide类只具有显示：无。然而，所有的li元素始终可见，即使dropdropBar正在按需扩展和崩溃。

附言。我正在使用Javascript（无库）在鼠标悬停/鼠标悬停事件上切换类。

为什么不起作用？

谢谢。

Answer 1

display: none的工作原理为li的元素和皮那些具有类，所以问题必须是别处：

.hide {
  display: none;
}

<ul id="dropDownBar" class="hideList">
  <li id="preschool">Pradine</li>
  <li id="middleschool">Pagrindine</li>
  <li id="highschool" class="hide">Abiturientai</li>
  <li id="grownups" class="hide">Suauge</li>
  <li id="conferences" class="hide">Konferencijos</li>
  <li id="other" class="hide">Teminiai</li>
</ul>

Answer 2

与问题不完全或直接相关。

但是由于它没有隐藏，我想补充一下

CSS考虑特殊性。

“内联” 具有最高优先级

“ID” 一随之而来的

然后是“类”

然后是 “HTML标签”

body {
  background: red;
}

#body {
  background: pink;
}

.body {
  background: green;
}

<body id="body" class="body" style="background:blue;">

</body>

为什么不显示：在无属性工作<LI>元素

2 个答案: