Css 根据不同的悬停元素更改背景

当鼠标悬停在拐角处的每个圆圈上时，主区域的背景颜色应改变，以便与圆圈的颜色相匹配，同时有足够的段落显示

我试过过渡，不透明。。。但没能让它工作

注意，HTML必须保持不变

*{
保证金：0；
填充：0；
}
身体{
位置：相对位置；
高度：100vh；
文本对齐：居中；
}
p{
字体系列：Arial、Helvetica、无衬线字体；
颜色：白色；
}
.bg{
位置：相对位置；
高度：100vh；
背景色：#333；
}
.圆圈{
高度：10px；
宽度：10px；
边界半径：50%；
边框：白色实心2px；
z指数：1；
}
.红圈{
位置：绝对位置；
排名前10%；
左：10%；
背景色：红色；
}
格林先生，圆圈{
位置：绝对位置；
排名前10%；
右：10%；
背景颜色：绿色；
}
.蓝色.圆形{
位置：绝对位置；
底部：10%；
左：10%；
背景颜色：蓝色；
}
橙色圆圈{
位置：绝对位置；
底部：10%；
右：10%；
背景颜色：橙色；
}
p、 红色的{
显示：无；
背景色：红色；
线路高度：100vh；
}
p、 绿色的{
显示：无；
背景颜色：绿色；
线路高度：100vh；
}
p、 蓝色的{
显示：无；
背景颜色：蓝色；
线路高度：100vh；
}
p、 橙色的{
显示：无；
背景颜色：橙色；
线路高度：100vh；
}

捷克红

Zielony
尼比斯基

波马兰佐维

由于它们在某种程度上处于相同的层次结构中，因此您可以利用

~

通用同级，仅当第二个元素紧跟第一个元素时（但不一定立即）：

/*已添加*/
.red.圆圈：悬停~.bg{
背景色：红色；
}
.green.circle:悬停~.bg{
背景颜色：绿色；
}
.blue.圆圈：悬停~.bg{
背景颜色：蓝色；
}
.橙色.圆圈：悬停~.bg{
背景颜色：橙色；
}
.red.circle:hover~.bg p.red{display:block；}
.green.circle:hover~.bg p.green{display:block；}
.blue.circle:hover~.bg p.blue{display:block；}
.orange.circle:hover~.bg p.orange{display:block；}
/*编辑结束*/
* {
保证金：0；
填充：0；
}
身体{
位置：相对位置；
高度：100vh；
文本对齐：居中；
}
p{
字体系列：Arial、Helvetica、无衬线字体；
颜色：白色；
}
.bg{
位置：相对位置；
高度：100vh；
背景色：#333；
过渡：背景色0.5s缓进；
}
.圆圈{
高度：10px；
宽度：10px；
边界半径：50%；
边框：白色实心2px；
z指数：1；
}
.红圈{
位置：绝对位置；
排名前10%；
左：10%；
背景色：红色；
}
格林先生，圆圈{
位置：绝对位置；
排名前10%；
右：10%；
背景颜色：绿色；
}
.蓝色.圆形{
位置：绝对位置；
底部：10%；
左：10%；
背景颜色：蓝色；
}
橙色圆圈{
位置：绝对位置；
底部：10%；
右：10%；
背景颜色：橙色；
}
p{
过渡：背景色1s，易于调整；
}
p、 红色的{
显示：无；
背景色：红色；
线路高度：100vh；
}
p、 绿色的{
显示：无；
背景颜色：绿色；
线路高度：100vh；
}
p、 蓝色的{
显示：无；
背景颜色：蓝色；
线路高度：100vh；
}
p、 橙色的{
显示：无；
背景颜色：橙色；
线路高度：100vh；
}

捷克红

Zielony
尼比斯基

波马兰佐维

@soulshined的css唯一解决方案非常好，但以防有人想使用javascript—这里有一个提示：

const bg = document.querySelector(".bg");
const circles = document.querySelectorAll(".circle");

circles.forEach(circle => circle.addEventListener("mouseenter", (e) => {
  const style = getComputedStyle(e.target);
  const backgroundColor = style.backgroundColor;

  bg.style.backgroundColor = backgroundColor;
}))

---

我将简化您的代码，使其依赖于背景和内容的伪元素和数据属性。这样就更容易控制，因为您不需要任何复杂的选择器：

正文{
保证金：0；
背景：#333；
最小高度：100vh；
}
.圆圈{
位置：绝对位置；
高度：10px；
宽度：10px；
边界半径：50%；
边框：白色实心2px；
}
.圆圈：：之前{
内容：attr（数据文本）；
字体系列：Arial、Helvetica、无衬线字体；
文本对齐：居中；
颜色：白色；
线路高度：100vh；
字号：80px；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
z指数：-2；
背景：继承；
不透明度：0；
过渡：1s；
}
.circle:hover:：before{
不透明度：1；
}
.圆圈，红色{
排名前10%；
左：10%；
背景：红色；
}
.绿色{
排名前10%；
右：10%；
背景：绿色；
}
.圆圈.蓝色{
底部：10%；
左：10%；
背景：蓝色；
}
.橙色{
底部：10%；
右：10%；
背景：橙色；
}