Question

 <aside class="-menu">
    <ul class="-menu-ul">
      <li><div class="-menu-items">Phones</div><div class="-menu-count">15</div></li>
    </ul>
</aside>

DEMO

我想在悬停时使用上面的结构设置li元素的背景颜色。

我正在使用这种风格来整理，删除列表标记并在悬停时设置背景颜色

.-menu{
    box-sizing: border-box;
    width: 20%;
    background-color: aliceblue;
    display: inline-block;
    padding: 30px;
}
.-menu-items{
    float: left;
}
.-menu-count{
    float: right;
}
ul.-menu-ul{
    list-style:none;
}
ul.-menu-ul li{
    clear: both;
    line-height: 30px;
    padding: 0 10px;
}
.-menu-ul li:hover{
background-color: #cdd4c4;
}

不幸的是，它不起作用。知道为什么吗？

Answer 1

当您浮动div时，他们会从文档流中删除它们，而<li>会崩溃并且行为就像没有内容一样，这就是您应用悬停规则的地方。恢复悬停行为的简便方法是将overflow: auto添加到您的<li>规则中。

<强> codepen example

Answer 2

.scenes-menu { box-sizing: border-box; width: 20%; background-color: aliceblue; display: inline-block; padding: 30px; } .scenes-menu-items { float: left; } .scenes-menu-count { float: right; } ul.scenes-menu-ul { list-style: none; } ul.scenes-menu-ul li { clear: both; line-height: 30px; padding: 0 10px; overflow: hidden; } .scenes-menu-ul li:hover { background-color: #cdd4c4; }的高度为0，因为它的子项是浮动的，因此您需要清除浮动以显示悬停。

＆＃13;

<aside class="scenes-menu">
  <ul class="scenes-menu-ul">
    <li>
      <div class="scenes-menu-items">Phones</div>
      <div class="scenes-menu-count">15</div>
    </li>
  </ul>
</aside>

＆＃13;

footer {
    width: 100%;
    height: 150px;
}

＆＃13;

设置li元素的背景颜色，列表样式设置为none

2 个答案: