Question

http://jsfiddle.net/meh/tdmdunpn/1/

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

我希望将具有.c1类的此flex表（不是实际表）的所有单元格用于将任何一个具有类.c1的元素悬停时将背景颜色更改为浅红色。

我希望在没有JS的情况下使用纯CSS但我愿意在必要时使用它。

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

Answer 1

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

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

.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()的第二部分指定。

请参阅更新的小提琴：“http://jsfiddle.net/tdmdunpn/12/”

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

2 个答案: