下拉悬停不起作用

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: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>

​