Html 同一DIV上的CSS更改

我有这样一句话：

<div class="blue-car">
<a href="#">Car</a>
</div>

<div class="iColor">
<a href="#">Blue</a>
<div>


.blue-car:hover { color: red; }

.iColor:hover { color: read; }

.蓝色汽车：悬停{颜色：红色；}
.iColor:hover{color:read；}

我想让当有人悬停到汽车div的第二个div的iColor改变css和当悬停到iColor div蓝色汽车改变css

例如，我将鼠标悬停在“汽车”上，“蓝色”将变为红色，当我将鼠标悬停在“蓝色”上时，“汽车”将变为红色，我想让人们意识到这两个链接是相关的

我想有这个在css只。没有jquery。我试过很多次，但现在没有成功

---

让我澄清一下，这里是这个网站上的一个例子。你们可以看到当你们悬停在一个国家地图上时，右边的css链接会改变，你们可以看到当你们悬停在一个国家链接上时，国家地图的css会改变。这意味着这两个部门互相工作。他们是如何在这个网站上做到这一点的：

尽管我不能很好地解释你写的内容，但我立即注意到你的css选择器中有一个缺陷

将代码更改为：

 <style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
 </style>

.蓝色汽车：悬停a{颜色：红色；}
.iColor:将鼠标悬停在{color:red；}

这有什么不同<代码>iColor:悬停在a上。查看

a

，锚定选择器。添加它是因为您以前的CSS只选择了

div

。在css中，子元素（在本例中为锚点）将取代其父元素。有两种方法可以解决这个问题。第一个，或者在css

inherit

中设置锚定标记的颜色

---

如果这不是你的问题，我会修正我的答案。

虽然我不能很好地解释你写的内容，但我立即注意到你的css选择器中有一个缺陷

将代码更改为：

 <style>
.blue-car:hover a { color: red; }
.iColor:hover a { color: red; }
 </style>

.蓝色汽车：悬停a{颜色：红色；}
.iColor:将鼠标悬停在{color:red；}

这有什么不同<代码>iColor:悬停在a上。查看

a

，锚定选择器。添加它是因为您以前的CSS只选择了

div

。在css中，子元素（在本例中为锚点）将取代其父元素。有两种方法可以解决这个问题。第一个，或者在css

inherit

中设置锚定标记的颜色

---

如果这不是你的问题，我会修正我的答案。

我不太确定你在问什么，因为你的问题有点不清楚

据我所知，您的问题源于您所指的是

div

的

color

属性，而不是链接的

color

属性

这是一个简单的修复方法：您所需要做的就是从div向下钻取到链接

。蓝色汽车：将鼠标悬停在a上{
颜色：红色；
}
.iColor:将鼠标悬停在a上{
颜色：红色；
}

请记住，这不是最好的方法，除非您绝对需要在

div

的上下文中引用链接。我知道您的问题适合您代码中更广泛的上下文，但对于您在这里给出的示例，您真正需要的是：

a：悬停{
颜色：红色；
}

再一次，我意识到你可能需要改变颜色或更具体，但可能有更好的方法来做到这一点，即使是这样

此特定实现的问题是您的

div

比链接大，而将鼠标悬停在

div

上会激活颜色更改，因此您将遇到此问题：

---

我不太清楚你在问什么，因为你的问题有点不清楚

据我所知，您的问题源于您所指的是

div

的

color

属性，而不是链接的

color

属性

这是一个简单的修复方法：您所需要做的就是从div向下钻取到链接

。蓝色汽车：将鼠标悬停在a上{
颜色：红色；
}
.iColor:将鼠标悬停在a上{
颜色：红色；
}

请记住，这不是最好的方法，除非您绝对需要在

div

的上下文中引用链接。我知道您的问题适合您代码中更广泛的上下文，但对于您在这里给出的示例，您真正需要的是：

a：悬停{
颜色：红色；
}

再一次，我意识到你可能需要改变颜色或更具体，但可能有更好的方法来做到这一点，即使是这样

此特定实现的问题是您的

div

比链接大，而将鼠标悬停在

div

上会激活颜色更改，因此您将遇到此问题：

---

首先，CSS没有以前的同级操作符。只能选择相邻的（使用

+

）或常规的（使用

~

）

仅使用HTML和CSS就可以达到您想要的效果。下面是一个解决方案：。基本上，

.area

显示为一个表格，使其环绕链接和图像。但是，链接是绝对定位的，这会阻止它“包含”在由

.area

包裹的区域中。这样，

.area

仅环绕图像。然后，将鼠标悬停在

区域上，突出显示链接。通过将鼠标悬停在链接上，我们可以突出显示图像

标记：

<div class = "area">
    <a href = "#">Link</a>
    <img src = "http://placehold.it/100x100" />
</div>

首先，CSS没有以前的同级操作符。只能选择相邻的（使用
+
）或常规的（使用
~
）

仅使用HTML和CSS就可以达到您想要的效果。下面是一个解决方案：。基本上，
.area
显示为一个表格，使其环绕链接和图像。但是，链接是绝对定位的，这会阻止它“包含”在由
.area
包裹的区域中。这样，
.area
仅环绕图像。然后，将鼠标悬停在
区域上，突出显示lin