javascript - 悬停特定类时禁用背景颜色

Question

我有一个像这样的简单 html 列表...

.special {
    background: yellow;
}

li:hover {
    background: purple;
    color:white;
}

<ul>
  <li class="special">
    <a href="#">
      Item 1
    </a>
  </li>
  <li>
    <a href="#">
      Item 2
    </a>
  </li>
  <li class="special">
    <a href="#">
      Item 3
    </a>
  </li>
  <li class="special">
    <a href="#">
      Item 4
    </a>
  </li>
  <li>
    <a href="#">
      Item 5
    </a>
  </li>
</ul>

当special悬停该类的菜单项时，我希望在yellow除悬停之外的所有项目上禁用背景颜色。

有没有办法可以做到这一点，CSS或者我需要添加一些javascript？

标签： javascripthtmlcss

Answer 1

你可以用 CSS 来做到这一点。使用选择器 ul:hover li 选择所有 li 标记，这些标记是悬停在 uls 上的后代。如果你添加更多的 CSS 和一个过渡，你会得到一个很酷的效果。尝试将鼠标悬停在一个 li 标签上，然后立即将鼠标悬停在另一个标签上

li, li a {
  transition:
    all 0.5s cubic-bezier(1,0.5,0,0.5),
    font-size 0.25s cubic-bezier(0,1,1,0);
  -moz-transition:
    all 0.5s cubic-bezier(1,0.5,0,0.5),
    font-size 0.25s cubic-bezier(0,1,1,0);
  -webkkit-transition:
    all 0.5s cubic-bezier(1,0.5,0,0.5),
    font-size 0.25s cubic-bezier(0,1,1,0);
  text-align: center;
  height: 22px;
}

.special {
  background: orange;
}

ul:hover li{
  background: white
}

ul:hover li:hover {
  background: red;
  height: 35px;
}

ul li a {
  font-size: 16px;
}

ul:hover li a {
  font-size: 20px;
}

ul:hover li:hover a {
  color: white;
  font-weight: 1000;
  font-size: 30px;
}

<ul>
  <li class="special">
    <a href="#">
      Item 1
    </a>
  </li>
  <li>
    <a href="#">
      Item 2
    </a>
  </li>
  <li class="special">
    <a href="#">
      Item 3
    </a>
  </li>
  <li class="special">
    <a href="#">
      Item 4
    </a>
  </li>
  <li>
    <a href="#">
      Item 5
    </a>
  </li>
</ul>