Question

我设置了一个包含多个div的页面，我想这样做，当你将鼠标悬停在一个div上时，其他div会消失。我试着用这个：

＆＃13;

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

＆＃13;

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

＆＃13;

但没有任何反应。我也尝试改变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的兄弟姐妹。

Answer 2

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

Answer 3

你非常接近。你只需要正确地将你的一些css组合在一起。请尝试以下代码段以查看有效示例：

＆＃13;

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

＆＃13;

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

＆＃13;

对于不同的div，CSS显示无悬停

3 个答案: