下拉悬停不起作用

Question

我希望当您将鼠标悬停在链接上时显示该列表。但它不起作用。

请参阅以下代码段：

.assist-label:hover .assist-list {
  display: block;
}

.assist-list {
  width: 100px;
  background-color: #141825;
  height: 0;
  opacity: 0;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: none;
}

<div class="car-assist-container">
  <a href="#" class="assist-label" id="label">Car Assistant</a>
  <ul class="assist-list">
    <li class="assist-item" id="carWorth">Car Worth</li>
    <li class="assist-item browse">
      Browse
      <ul class="browse-list">
        <li class="browse-item" id="browseMake">Makes</li>
        <li class="browse-item" id="browseType">Types</li>
        <li class="browse-item" id="browseYear">Year</li>
      </ul>
    </li>
    <li class="assist-item">Compare</li>
  </ul>
</div>

Answer 1

有了这个结构

<a href="#" class="assist-label" id="label">Car Assistant</a>
        <ul class="assist-list">

这个

.assist-label:hover .assist-list{
   display: block;
  }

无效，因为.assist-list 不是assist-label的孩子......这是兄弟

你想要

.assist-label:hover + .assist-list{
       display: block;
      }

使用相邻的兄弟选择器。

注意：您还必须在悬停时修改列表的不透明度。

.assist-label:hover+.assist-list {
  display: block;
  opacity: 1;
}

.assist-list {
  width: 100px;
  background-color: #141825;
  height: 0;
  opacity: 0;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: none;
}

<div class="car-assist-container">
  <a href="#" class="assist-label" id="label">Car Assistant</a>
  <ul class="assist-list">
    <li class="assist-item" id="carWorth">Car Worth</li>
    <li class="assist-item browse">
      Browse
      <ul class="browse-list">
        <li class="browse-item" id="browseMake">Makes</li>
        <li class="browse-item" id="browseType">Types</li>
        <li class="browse-item" id="browseYear">Year</li>
      </ul>
    </li>
    <li class="assist-item">Compare</li>
  </ul>
</div>