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

Question

.c1:hover {background-color: #b00806}

我希望这个 flex table（不是实际的 table）的所有单元格都带有 class .c1，以便在任何一个时将背景颜色更改为浅红色带有 class .c1 的元素悬停。

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

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

Answer 1

你需要 Javascript 才能做到这一点。

如果您对 Jquery 感兴趣，我可能会根据现有选择器切换一个新的 class 来管理它。

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

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

JSFiddle Demo

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

#slider {
 clear: both;
 width: 100%; margin-left: auto; margin-right: auto;
 height: 250px;
 display: flex;
 flex: 0 1 auto;
 flex-direction: column;
 flex-wrap: no-wrap;
 background-color: white;
 box-sizing: border-box;
}

.slide {
 height: 100%;
 min-width: 100%;
 width: 33.3%;
 border: thin black solid;
 border-right: medium black solid;
 border-left: medium black solid;
 flex-grow: 1;
 display: flex;
 flex: 0 1 auto;
 flex-flow: no-wrap row;
 box-sizing: border-box;
}

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

.slide:first-child {
 border-bottom: medium #b00806 solid;
 border-top: medium black solid; 
}

.slide:last-child {
 border-bottom: medium black solid; 
}

.row {
 border-right: thin black solid;
 flex-grow: 1;
 box-sizing: border-box;
}

.row:first-child {
 flex-grow: 3; 
}

.row:nth-child(2) {
 flex-grow: 2; 
}

.row:nth-child(3) {
 flex-grow: 2; 
}

.row:last-child {
 border-right: none; 
}

.row:hover {
 background-color: rgba(143,6,4,0.48); 
}

.tab1text {
 line-height: 100%;
 width: 100%;
 padding: 5px; 
}

.row {
 width: 1px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="tab-content1" class="tab-content">
                <div id="w1"><div id="slider">
        <div class="slide">
                     <div class="row c1"><a class="tab1text" href=""></a></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>
                    <div class="slide">
                     <div class="row c1"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>
                    <div class="slide">
                     <div class="row c1"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>
                    <div class="slide">
                     <div class="row c1"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>
                    <div class="slide">
                     <div class="row c1"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>
                    <div class="slide">
                     <div class="row c1"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>
                    <div class="slide">
                     <div class="row c1"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                        <div class="row"></div>
                    </div>

Answer 2

我认为使用纯 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" 上时，它会将 background-color 更改为任何颜色（例如浅红色），在 hover out 上它将更改为 'white' 再次按照 hover().

的第二部分指定

查看更新后的 fiddle：“http://jsfiddle.net/tdmdunpn/12/”

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

All elements in class change colour when any one element in class is hovered

css

hover

flexbox