如何在悬停在另一个上时调整2个div的大小？

Question

我有一个项目网站。有3个div。我想要做的是，当我将鼠标悬停在第一个div上时，另外2个变得更小以便强调。我试过这个但是只有两个div中的一个使用兄弟和父div来缩小。当只悬停一个div时，如何调整大小或更多div？

我需要CSS，因为规则说javascript可能不会被使用。

Answer 1

使用sibling ~ selector这可以实现，虽然它有限。

在这里，我们选择所有带有类.tohide的元素。使用类.tohover的div之后，所以你可以看到它们已经来到了悬停的元素之后。

＆＃13;

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  display:inline-block;
}

.tohover:hover ~ .tohide {
  height:50px;
  vertical-align:top; /* To stick them to the top */
}

＆＃13;

<div class="tohover"></div>
<div class="tohide"></div>
<div class="tohide"></div>

＆＃13;

＆＃13;

＆＃13;