当另一个 Div 悬停在第一个 Div 之后时，如何更改 Div 的 CSS 属性

Question

我有DIV 1和DIV 2。在代码中Div 2位于Div 1之后。我想更改[=的背景颜色29=] 1 当 Div 2 悬停时。最好是我不想改变HTML结构，也不想使用JS。

div {
  background-color: yellow;
  padding: 20px;
  display: none;
}
  
span:hover div {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>I will show on hover</div>
<span>Hover over me!</span>


</body>
</html>

提前致谢。

Answer 1

如果您更改 div 和 span 的生成顺序，您可以做您想做的事。如果你不想改变元素的顺序，没有 JS 是不可能的。

div {
  background-color: yellow;
  padding: 20px;
  display: none;
}
  
span:hover + div {
  display: block;
}

<span>Hover over me!</span>
<div>I will show on hover</div>

How to chage CSS attributes of a Div when another Div is hovered that is located after the first Div