Html 更改图像A&；B当悬停图像C时_Html_Css

Html 更改图像A&；B当悬停图像C时

html css

Html 更改图像A&；B当悬停图像C时,html,css,Html,Css,我有3个div，A，B和C，每个div都有3个不同的背景，这取决于三个div中悬停的是哪一个想法是将divs的背景更改如下：在A悬停时，将A背景更改为a1，B更改为b1，C更改为c1 在B悬停时，将A背景更改为a2，B更改为b2，C更改为c2 在C悬停时，将A背景更改为a3，B更改为b3，C更改为c3 似乎在尝试更改div之前的div的背景时失败了：hoverdiv HTML CSS .team1{ 背景：url（“图像1/a的url”）； } .2队{ 背景：url（“图像2/a的

我有3个div，

，

和

，每个div都有3个不同的背景，这取决于三个div中悬停的是哪一个

想法是将

divs

的背景更改如下：

在
```
A
```
悬停时，将
```
A
```
背景更改为
```
a1
```
，
```
B
```
更改为
```
b1
```
，
```
C
```
更改为
```
c1
```
在
```
B
```
悬停时，将
```
A
```
背景更改为
```
a2
```
，
```
B
```
更改为
```
b2
```
，
```
C
```
更改为
```
c2
```
在
```
C
```
悬停时，将
```
A
```
背景更改为
```
a3
```
，
```
B
```
更改为
```
b3
```
，
```
C
```
更改为
```
c3
```

似乎在尝试更改

div

之前的

div的背景时失败了：hover

div

HTML

CSS

.team1{
背景：url（“图像1/a的url”）；
}
.2队{
背景：url（“图像2/a的url”）；
}
.3队{
背景：url（“图像3/a的url”）；
}
.1组：悬停{
背景：url（“图像1/b的url”）；
}
.2组：悬停{
背景：url（“图像2/b的url”）；
}
.3组：悬停{
背景：url（“图像3/b的url”）；
}
.team1:悬停~.team2{
/*这很有效*/
背景：url（“图像2/c的url”）；
}
/*这很有效*/
.team1:悬停~.team3{
/*这很有效*/
背景：url（“图像3/c的url”）；
}
.team2:悬停~.team1{
/*这不行*/
背景：url（“图像1/c的url”）；
}
CSS中的~
表示元素将位于第一个元素之后的某个位置。在您的情况下，team-3
无法针对team-1
，因为它位于team-3
之前
所以.team-3:hover~。team-1
不起作用，因为3在1之后，但是。team-1:hover~。team-3
起作用，因为1在3之前
因此，这里有一个jQuery解决方案来满足您的需求

$（“.team-1”）。悬停(
函数（）{
$（“.team-1”）.addClass（“team-1-1”）；
$（“.team-2”）.addClass（“team-2-1”）；
$（“.team-3”）.addClass（“team-3-1”）；
},
函数（）{
$（“.team-1”）.removeClass（“team-1-1”）；
$（.team-2”）.removeClass（“team-2-1”）；
$（“.team-3”）.removeClass（“team-3-1”）；
}
);
$（“.team-2”）。悬停(
函数（）{
$（“.team-1”）.addClass（“team-1-2”）；
$（“.team-2”）.addClass（“team-2-2”）；
$（“.team-3”）.addClass（“team-3-2”）；
},
函数（）{
$（“.team-1”）.removeClass（“team-1-2”）；
$（.team-2”）.removeClass（“team-2-2”）；
$（“.team-3”）.removeClass（“team-3-2”）；
}
);
$（“.team-3”）。悬停(
函数（）{
$（“.team-1”）.addClass（“team-1-3”）；
$（“.team-2”）.addClass（“team-2-3”）；
$（“.team-3”）.addClass（“team-3-3”）；
},
函数（）{
$（“.team-1”）.removeClass（“team-1-3”）；
$（.team-2”）.removeClass（“team-2-3”）；
$（“.team-3”）.removeClass（“team-3-3”）；
}
);
div{
高度：100px；
宽度：100px；
填充物：5px；
显示：内联块；
}
.team-1{背景：绿色；}
.team-2{背景：红色；}
.team-3{背景：蓝色；}
.team-1-1{背景：图表复用；}
.team-2-1{背景：深粉色；}
.team-3-1{背景：aqua；}
.team-1-2{背景：暗绿色；}
.team-2-2{背景：darkred；}
.team-3-2{背景：darkcyan；}
.team-1-3{背景：forestgreen；}
.team-2-3{背景：紫红色；}
.team-3-3{背景：dodgerblue；}
这不能单纯用css来完成。您必须使用JS
只有在HTML中.b
位于.a
之后时，才能在pur CSS中执行此操作
在以下示例中：

.a:悬停=>.b
和.c
工作

.b:悬停
=>.a
不工作，因为它在之前.c
工作，因为它在
.c:悬停
=>.a
和.b
不起作用，因为之前有


.child{
高度：100px；
宽度：100px；
填充物：5px；
显示：内联块；
}
/*管理*/
.a{
背景：绿色；
}
a:悬停~{
背景#8AB800；
}
a:悬停{
背景:#33FF66；
}
/*管理B*/
.b{
背景：红色；
}
悬停{
背景:#FF0080；
}
悬停{
背景#FF7A7A；
}
/*管理C*/
c{
背景：蓝色；
}
c:悬停{
背景：#7A7AFF；
}
c:悬停~.b{
背景：#00FFFF；
}
/*管理所有*/
a:悬停，.b:悬停，.c:悬停{
背景：黄色；
}

对不起，我在这里摸不着头脑。被这个问题弄糊涂了。你能试着重新措辞吗？@DavidWilkinson我想OP希望所有3个背景都改变，不管悬停的是什么图像对不起：-）看到3个div元素了吗？我该如何选择。team1在悬停时的行为。team2？你需要javascript来实现这一点。你在使用jquery吗？是的，我是这个项目的。当鼠标悬停在一个元素上时，其他背景不会改变。他希望鼠标悬停在“A”上时“B”和“C”会改变（据我所知）。当您将鼠标悬停在容器上时，您的代码将更改所有三个。你的代码片段有效，不确定是否是他想要的。不，但谢谢。实际上，我需要所有3个在悬停时更改，每个都有不同的指定背景是的，但您有“在悬停容器时更改图像a&B&C”。也许这就是他想要的。但我并不理解他的问题。@Wim很公平-你不能从team-3
中瞄准team-1
，因为team-3
在team-1
之后。因此，您必须使用jquery，这不是答案。你说CSS不起作用，使用JS-JS在哪里？答案必须提供一个解决方案——你的答案不是。@CalvT：也许我没有提供现成的交钥匙解决方案，但至少我解释了CSS解决方案不能工作的原因。（注：我为添加一些JS示例而编辑）。是的-我在评论中解释过，如果你看一下修改后的编辑，你会发现首先我寻求CSS解决方案，因为OPs问题不清楚