CSS 悬停时显示 none 不同的 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

因此找到具有 class Short 或 Digital 的兄弟姐妹。

Answer 2

您需要在两个 div 之间使用 ,。 JSFiddle link 是 here

Answer 3

你们非常亲密。您只需要将您的一些 css 正确地组合在一起。尝试以下代码片段以查看工作示例：

.Features:hover ~ .Short, .Features:hover ~ .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>

CSS 悬停时显示 none 不同的 div

CSS display none on hover for different divs

css

hover