为什么不显示：在无物业工作 元素？ [关闭]

问题描述 投票：0回答：2

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

我的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有从0 dropDownBar的改变高度与过渡效果扩展菜单的高度hideList和showList类。所以这似乎很好地工作。但是，在上面我想使它李元素出现和消失的dropDownBar的扩大，colapsing。

所以最初li元素应该是不可见的，在下拉栏鼠标悬停后出现。

.hide类只具有显示：无。然而，所有li元素是可见的所有的时间甚至认为dropDownBar的扩大，因为它应该colapsing。

Ps.I'm使用Javascript（无库）打开鼠标悬停/鼠标移开事件的类。

为什么没有这方面的工作？

谢谢。

html css
2个回答
2
投票

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>
2
投票

不完全或问题直接相关。

不过到了原因，并没有隐瞒我想补充一点，

CSS认为特异性。

“内联”具有最高优先级

“标识”随之而来的

然后是“类”

然后是“HTML标签”

body {
  background: red;
}

#body {
  background: pink;
}

.body {
  background: green;
}
<body id="body" class="body" style="background:blue;">

</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.