CSS更改在相同的DIV上

Question

我有这句话：

<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; }

我想当有人徘徊到Car div第二个div时iColor改变css并悬停到iColor div蓝色车改变css。

即。我徘徊在＆＃39; Car＆＃39; ，＆＃39;蓝＆＃39;将颜色变为红色，当我将鼠标悬停在＆＃39;蓝色＆＃39; ，＆＃39; Car＆＃39;将颜色改为红色，我想让人们意识到这两个链接是相关的。

我很想在css中拥有它。没有jquery。我现在已经尝试了许多没有成就。

我要清楚这一点，这是这个网站上的一个例子。您可以看到当您悬停到国家/地区地图时，右侧的CSS链接将发生变化，您可以看到当您悬停到国家/地区链接时，国家/地区地图css将发生变化。这意味着这两个div互为工作。他们如何在此网站上执行此操作：http://www.avito.ru

Answer 1

首先，CSS没有以前的兄弟运营商。唯一可以选择的兄弟姐妹是相邻的（使用+）或一般（使用~）。

可以实现仅使用HTML和CSS的效果。以下是一个解决方案：http://jsfiddle.net/KGabX/。基本上，.area显示为一个表格，使其环绕链接和图像。但是，链接绝对定位，这可以防止链接被包含在内。在.area包裹的领土内。这样，.area仅包裹在图像周围。然后，将鼠标悬停在.area上，我们会突出显示该链接。并且，通过将鼠标悬停在链接上，我们会突出显示图像。

标记：

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

样式：

.area {
    display: table;
    position: relative;
}

.area:hover > a {
    color: red;
}

.area > img {
    cursor: pointer
}

.area > a {
    position: absolute;
    right: -50px;
    top: 50%;
    font: bold 15px/2 Sans-Serif;
    color: #000;
    text-decoration: none;
    margin-top: -15px;
}

.area > a:hover {
    color: initial;
    text-decoration: underline;
}

.area > a:hover + img {
    opacity: 0.5;
}

Answer 2

虽然我无法解释你写的很好，我立即注意到你的css选择器有一个缺陷。

将您的代码更改为：

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

它的不同之处是什么？ iColor:hover a 。查看a锚点选择器。之所以添加，是因为您以前的CSS只选择了div。在css中，子元素（在这种情况下是锚）将取代它的父母。有两种方法可以解决这个问题。第一个，或使锚标签在css inherit中着色。

如果这不是您的问题，我会解决问题。

Answer 3

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

根据我的理解，您的问题源于您指的是color的{​​{1}}属性，而不是链接的div属性

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

color

Demo

请注意，除非绝对需要引用.blue-car:hover a{ color: red; } .iColor:hover a{ color: red; } 上下文中的链接，否则这不是最好的方法。我知道你的问题适合你代码中更广泛的背景，但是对于你在这里给出的例子，你真正需要的是：

div

同样，我意识到您可能需要更改颜色或更具体，但有可能是更好的方法，即使情况如此。

此特定实施的问题是，您的a:hover{ color: red; } 比链接大，而div上的悬停是激活颜色变化的原因，因此您将遇到此问题：