html - 在悬停的几个 div 上更改背景图像

Question

我有 4 个 div，它们都有自己的背景图片。当我将其中一个悬停时，该背景图像应该遍布所有 div。附件是它应该如何工作的例子。

如何使用 CSS 实现这种效果？

Answer 1

例子：

.container{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.card{
height: 500px;
width: 250px;

}
.first{
    background-color: red;
}
.first:hover  ~ .card{
    background-color: red !important
}
.second {
    background-color: blue;
}
.third{
    background-color: yellow;
}
.fourth{
    background-color: green;

}

<div class="container">
    <div class="card first"></div>
    <div class="card second"></div>
    <div class="card third"></div>
    <div class="card fourth"></div>
</div>

在这种情况下，所有卡片都是“兄弟”，因为它们都是容器的直接子元素。~ 选择器适用于“兄弟姐妹”，使用 SCSS 肯定有更优雅的解决方案，但这通常描述了它的工作原理，还请查看以下描述各种选择器的帖子，具体取决于它们的传统：

邮政