纯CSS非sass，将鼠标悬停在一个元素上并展开其他元素

Question

使用纯CSS。没有SASS。我想知道是否有可能写一些东西，当悬停在不同的元素上时，可以产生悬停效果（不同的元素在大小上稍微扩展）。

基本上是这样。将鼠标悬停在一个元素上，将展开一个既不是子元素也不是父元素的不同div元素。我可以用纯CSS做这件事吗？

Answer 1

CSS还不支持任何父选择器，所以这已经超出了范围。除了子选择器（您排除了它）之外，还有两个兄弟选择器+用于相邻的兄弟姐妹，~用于一般的兄弟姐妹。

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  display: inline-block;
  background: blue;
  vertical-align: top;
  transition: 1s all;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
  color: white;
}
div#one:hover + div#two {
  width: 200px;
}
div#one:hover ~ div#three {
  background: red;
}

<div id="one">Hover me!</div>
<div id="two"></div>
<div id="three"></div>

注意：同级选择器只按代码中的出现顺序工作。因此，div#two ~ div#one将而不影响第一个div。