CSS Change On same DIV

Question

I have this in line:

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

I would like to make when someone hover to Car div second div which iColor change css and when hover to iColor div blue-car change css.

ie. I hover to 'Car' , 'Blue' will change color to red and when I hover to 'Blue' , 'Car' will change color to red, I want to make people aware that this two link is related.

I would love to have this in css only. No jquery. I have tried many no achievement at this moment.

Let me clear this, here is an example on this site. You could see when you hover to a country map, css link on right side will change, and you could see when you hover to a country link, country map css will change. This means this two div work each other. How they do this on this site: http://www.avito.ru

Answer 1

To start, CSS does NOT have a previous sibling operator. The only siblings that can be selected are adjacent (using +) or general (using ~).

It is possible to achieve the effect that you are seeking using only HTML and CSS. Below is one solution: http://jsfiddle.net/KGabX/. Basically, the .area is displayed as a table, which makes it wrap around the link and the image. However, the link is positioned absolutely, which prevents it from being "included" in a territory wrapped by the .area. This way, the .area is wrapped only around the image. Then, hovering over the .area we highlight the link. And, by hovering over the link we highlight the image.

Markup:

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

Styles:

.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

Although I could not interpret what you wrote very well, I immediately noticed a flaw in your css selector.

Change your code to this:

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

What's different about it? iColor:hover a. Look at the a, anchor selector. It was added because your previous CSS was only selecting the div. In css the child element, in this case the anchor, will supersede it's parents. There's two ways you can approach this. The first, or make the anchor tags color in css inherit.

If this wasn't your problem I'll fix my answer.

Answer 3

I'm not quite sure what you're asking because your question is a bit unclear.

From what I can understand, your issue stems from the fact that you're referring to the color property of the div, rather than the color property of the link.

That's a simple fix: all you need to do is drill down through the div to the link.

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

Demo

Keep in mind that this isn't the best way to do this unless you absolutely need to refer to the links within the context of the div. I understand that your question fits into a broader context within your code, but for the example you gave here, all you really need is this:

a:hover{
    color: red;
}

Again, I realize that you may need to change the colors or be more specific, but there's probably a better way to do this, even if that's the case.

The issue with this particular implementation is that your div is larger than your link, and a hover on your div is what activates the color change, so you'll run into this issue: