Css 当类中的任何一个元素悬停时，类中的所有元素都会改变颜色

我希望这个灵活表格（不是实际表格）的所有单元格都带有.c1类，以便当带有.c1类的任何一个元素悬停时，将背景颜色更改为较浅的红色

我希望使用没有JS的纯CSS，但如果必要，我愿意使用

---

请不要建议使用实际的桌子，因为这对我来说不方便

要做到这一点，您需要Javascript

如果您对Jquery感兴趣，我可能会通过基于现有选择器切换一个新类来管理它

.slide:hover, .slideHover {
    background-color: rgba(176,8,6,0.45);
}

$( ".c1" ).hover(function() {
  $(".c1" ).toggleClass("slideHover");
});

$（“.c1”）.hover（函数（）{
$（“.c1”）.toggleClass（“幻灯片”）；
});
#滑块{
明确：两者皆有；
宽度：100%；左边距：自动；右边距：自动；
高度：250px；
显示器：flex；
flex:01自动；
弯曲方向：立柱；
柔性包装：无包装；
背景色：白色；
框大小：边框框；
}
.幻灯片{
身高：100%；
最小宽度：100%；
宽度：33.3%；
边框：薄黑色实心；
右边框：中黑色实心；
左边框：中黑色实心；
柔性生长：1；
显示器：flex；
flex:01自动；
柔性流：无换行；
框大小：边框框；
}
.slide：悬停，.slideHover{
背景色：rgba（176,8,6,0.45）；
}
幻灯片：第一个孩子{
边框底部：中等#b00806实心；
边框顶部：中黑色实心；
}
幻灯片：最后一个孩子{
边框底部：中黑色实心；
}
.行{
右边框：薄黑色实心；
柔性生长：1；
框大小：边框框；
}
.第一排：第一个孩子{
柔性生长：3；
}
.第行：第n个孩子（2）{
柔性生长：2；
}
.第行：第n个孩子（3）{
柔性生长：2；
}
.排：最后一个孩子{
边界权：无；
}
.行：悬停{
背景色：rgba（143,6,4,0.48）；
}
.tab1text{
线高：100%；
宽度：100%；
填充物：5px；
}
.行{
宽度：1px；
}
您需要Javascript来完成这项工作

如果您对Jquery感兴趣，我可能会通过基于现有选择器切换一个新类来管理它

.slide:hover, .slideHover {
    background-color: rgba(176,8,6,0.45);
}

$( ".c1" ).hover(function() {
  $(".c1" ).toggleClass("slideHover");
});



$（“.c1”）.hover（函数（）{
$（“.c1”）.toggleClass（“幻灯片”）；
});
#滑块{
明确：两者皆有；
宽度：100%；左边距：自动；右边距：自动；
高度：250px；
显示器：flex；
flex:01自动；
弯曲方向：立柱；
柔性包装：无包装；
背景色：白色；
框大小：边框框；
}
.幻灯片{
身高：100%；
最小宽度：100%；
宽度：33.3%；
边框：薄黑色实心；
右边框：中黑色实心；
左边框：中黑色实心；
柔性生长：1；
显示器：flex；
flex:01自动；
柔性流：无换行；
框大小：边框框；
}
.slide：悬停，.slideHover{
背景色：rgba（176,8,6,0.45）；
}
幻灯片：第一个孩子{
边框底部：中等#b00806实心；
边框顶部：中黑色实心；
}
幻灯片：最后一个孩子{
边框底部：中黑色实心；
}
.行{
右边框：薄黑色实心；
柔性生长：1；
框大小：边框框；
}
.第一排：第一个孩子{
柔性生长：3；
}
.第行：第n个孩子（2）{
柔性生长：2；
}
.第行：第n个孩子（3）{
柔性生长：2；
}
.排：最后一个孩子{
边界权：无；
}
.行：悬停{
背景色：rgba（143,6,4,0.48）；
}
.tab1text{
线高：100%；
宽度：100%；
填充物：5px；
}
.行{
宽度：1px；
}
我认为使用纯css是不可能的。您可以使用以下jquery代码来实现这一点：

 $(document).ready(function () {
    $(".c1").hover(function () {
        $(".c1").css("background-color", "rgba(176,8,6,0.45)");
    }, function () {
        $(".c1").css("background-color", "white");
    });
});

说明：当我们将鼠标悬停在
“.c1”
上时，它会将
背景色
更改为任何颜色（如浅红色），并将鼠标悬停在
上
时，它会根据
悬停（）的第二部分的指定再次将其更改为
白色

查看更新的提琴：“我认为使用纯css是不可能的。您可以使用以下jquery代码来实现这一点：

 $(document).ready(function () {
    $(".c1").hover(function () {
        $(".c1").css("background-color", "rgba(176,8,6,0.45)");
    }, function () {
        $(".c1").css("background-color", "white");
    });
});

说明：当我们将鼠标悬停在
“.c1”
上时，它会将
背景色
更改为任何颜色（如浅红色），并将鼠标悬停在
上
时，它会根据
悬停（）的第二部分的指定再次将其更改为
白色

请参阅更新的fiddl