我有3个div，A，B＆amp; C，每个都有3个不同的背景，具体取决于三个div中的哪一个悬停在上面。
我们的想法是更改divs的背景，如下所示：
A的鼠标悬停时，将A背景更改为a1，将B更改为b1，将C更改为c1 < / LI>
B的鼠标悬停时，将A背景更改为a2，将B更改为b2，将C更改为c2 < / LI>
C的鼠标悬停时，将A背景更改为a3，将B更改为b3，将C更改为c3 < / LI>
在尝试更改div :hover之前div的背景时，它似乎失败了。
<div class="team1"></div>
<div class="team2"></div>
<div class="team3"></div>
.team1 {
background: url("url of IMAGE1/a");
}
.team2 {
background: url("url of IMAGE2/a");
}
.team3 {
background: url("url of IMAGE3/a");
}
.team1:hover {
background: url("url of IMAGE1/b");
}
.team2:hover {
background: url("url of IMAGE2/b");
}
.team3:hover {
background: url("url of IMAGE3/b");
}
.team1:hover ~ .team2 {
/* this works */
background: url("url of IMAGE 2/c");
}
/* this works */
.team1:hover ~ .team3 {
/* this works */
background: url("url of IMAGE 3/c");
}
.team2:hover ~ .team1 {
/* this doesn’t work! */
background: url("url of IMAGE 1/c");
}
答案 0 :(得分：0)
这不能完全用css完成。你必须改用JS。
只有当.b位于HTML 中的.a之后，才能在pur CSS 中执行此操作。
以下例子：
.a:hover =＆gt; .b和.c工作.b:hover =＆gt; .a之前没有工作，因为它之前没有工作过; .c工作，因为它在.c:hover =＆gt; .a和.b之前没有工作，因为之前有
.child {
height: 100px;
width: 100px;
padding: 5px;
display: inline-block;
}
/* Manage A */
.a {
background: green;
}
.a:hover ~ .b {
background: #8AB800;
}
.a:hover ~ .c {
background: #33FF66;
}
/* Manage B */
.b {
background: red;
}
.b:hover ~ .a {
background: #FF0080;
}
.b:hover ~ .c {
background: #FF7A7A;
}
/* Manage C */
.c {
background: blue;
}
.c:hover ~ .a {
background: #7A7AFF;
}
.c:hover ~ .b {
background: #00FFFF;
}
/* Manage all */
.a:hover, .b:hover, .c:hover {
background: yellow;
}<div class="a child"></div>
<div class="b child"></div>
<div class="c child"></div>
pur JS中的例子：
$('.child').css({
'height': '100px',
'width': '100px',
'padding': '5px',
'display': 'inline-block',
});
$('.a:hover,.b:hover,.c:hover').css('background', 'yellow');
$('.a').css('background', 'green').hover(function() {
$('.b').css('background', '#8AB800');
$('.c').css('background', '#33FF66');
});
$('.b').css('background', 'red').hover(function() {
$('.a').css('background', '#FF0080');
$('.c').css('background', '#FF7A7A');
});
$('.c').css('background', 'blue').hover(function() {
$('.a').css('background', '#7A7AFF');
$('.b').css('background', '#00FFFF');
});.a:hover, .b:hover, .c:hover {
background: yellow !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a child"></div>
<div class="b child"></div>
<div class="c child"></div>
答案 1 :(得分：-1)
CSS中的~表示该元素将位于第一个元素之后的某个位置。在您的情况下，team-3无法定位team-1之前的team-3。
所以.team-3:hover ~ .team-1无效，因为3在1之后，但.team-1:hover ~ .team-3会起作用，因为1在3之前。
所以这是一个jQuery解决方案，可以做你想要的。
$(".team-1").hover(
function() {
$(".team-1").addClass("team-1-1");
$(".team-2").addClass("team-2-1");
$(".team-3").addClass("team-3-1");
},
function() {
$(".team-1").removeClass("team-1-1");
$(".team-2").removeClass("team-2-1");
$(".team-3").removeClass("team-3-1");
}
);
$(".team-2").hover(
function() {
$(".team-1").addClass("team-1-2");
$(".team-2").addClass("team-2-2");
$(".team-3").addClass("team-3-2");
},
function() {
$(".team-1").removeClass("team-1-2");
$(".team-2").removeClass("team-2-2");
$(".team-3").removeClass("team-3-2");
}
);
$(".team-3").hover(
function() {
$(".team-1").addClass("team-1-3");
$(".team-2").addClass("team-2-3");
$(".team-3").addClass("team-3-3");
},
function() {
$(".team-1").removeClass("team-1-3");
$(".team-2").removeClass("team-2-3");
$(".team-3").removeClass("team-3-3");
}
);div {
height: 100px;
width: 100px;
padding: 5px;
display: inline-block;
}
.team-1 { background: green; }
.team-2 { background: red; }
.team-3 { background: blue; }
.team-1-1 { background: chartreuse; }
.team-2-1 { background: deeppink; }
.team-3-1 { background: aqua; }
.team-1-2 { background: darkgreen; }
.team-2-2 { background: darkred; }
.team-3-2 { background: darkcyan; }
.team-1-3 { background: forestgreen; }
.team-2-3 { background: fuchsia; }
.team-3-3 { background: dodgerblue; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-1"></div>
<div class="team-2"></div>
<div class="team-3"></div>