CSS Only - make first element change colour when :hover over any sibling

Question

I want solution using only CSS

we have 3 circle here.

Whenever I perform mouse-over on circles with class Name Mycircle , the circle with class Name BigCircle should change to red color

html

<div class="BigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>

CSS

.mycircle,.BigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}

.mycircle:hover .BigCircle{background:red}

Here is the demo > http://jsfiddle.net/JGbDs/4/

Thanks in Advance

Answer 1

In your comments you state that you cannot re-arrange the elements, but you can add ones if required.

For that reason the general sibling combintor in the accepted answer is not suitable as the .bigCircle element would have to come all of the .myCircle elements. 所有的.myCircle元素。

There is no perfect way of achieving this using only CSS but it is possible by adding a "parent" element and using one of the following CSS solutions:

Solution 1

When hovering on the parent element, the .bigCircle child element will be coloured red:

HTML

<div class="parent">
    <div class="bigCircle"></div>
    <div class="mycircle"></div>
    <div class="mycircle"></div>
</div>

CSS

/* Add float to parent to fit width to content */
.parent {
    float: left;
    clear: both;
}

.parent:hover > .bigCircle{ 
    background: red;
}

The issue with this solution is that the .bigCircle element will be coloured red when you hover anywhere on the parent, not just on .myCircle . Adding the float reduces this effect - but if you hover just outside of the circle then the .bigCircle will still be red.

Solution 2

Using the parent element as a relative container, we can add a new element to the page using the after pseudo selector when a .myCircle element is hovered over:

HTML

<div class="parent">
    <div class="mycircle"></div>
    <div class="mycircle"></div>
    <div class="mycircle"></div>
</div>

CSS

/* replaced .bigCircle with mycircle:hover::after */ 
.mycircle, .mycircle:hover::after {
    ....
}

.parent {
    position: relative;
}

.mycircle:hover::after { 
    content: "";
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
}

The imperfection with this solution is that we are targeting the position of the first child of the parent element, rather than the element with the class name .bigCircle . Also, the after pseudo selector is supported in IE7. 支持after伪选择器。

Answer 2

No. That's not possible using just css. "Any sibling" selector is not there in css.

However, if you can move BigCircle to end, you can use general sibling combinator which can select successor siblings.

.mycircle:hover ~ .BigCircle{background:red}