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