CSS 在悬停时不显示不同的 div

Question

我设置了一个包含多个 div 的页面，我想让它在您将鼠标悬停在一个 div 上时，其他 div 消失。我试着用这个:

.Features:hover ~ .Short .Digital {
  display: none;
}

<div class="Features">
  <h3>Features</h3>
  <ul class="1">
    <li>ABC</li>
    <li>123</li>
    <li>Do, rey, mi</li>
  </ul>
</div>
<div class="Short">
  <h3>Short Reviews</h3>
  <ul>
    <li>ABC</li>
    <li>123</li>
    <li>Do, rey, mi</li>
  </ul>
</div>
<div class="Digital">
  <h3>Digital Reviews</h3>
  <ul>
    <li>ABC</li>
    <li>123</li>
    <li>Do, rey, mi</li>
  </ul>
</div>

但是没有任何反应。我还尝试更改 div 的不透明度，但这也不起作用。谁能帮忙？

Answer 1

你目前正在做的是:

.Features:hover  -- On Hover element
~                -- Find sibblings
.Short .Digital  -- With class .Short and then an item inside somewhere .Digital

你需要的是:

.Features:hover ~ div

或

.Features:hover ~ .Short, .Features:hover ~ .Digital

因此找到具有 Short 或 Digital 类的 sibling 。