It has been noted in your remarks that rearranging the elements is not an option, but there is room to add new ones if necessary.
Due to this constraint, the general sibling combinator mentioned in the solution provided cannot work effectively since the .bigCircle element must appear after all instances of the .myCircle element.
Although achieving perfection solely with CSS may be difficult, a workaround involves introducing a "parent" element and implementing one of the following CSS techniques:
Solution 1
Upon hovering over the parent element, the child element .bigCircle will change color to red:
View working example: http://jsfiddle.net/CKRef/
HTML
<div class="parent">
<div class="bigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* Apply float to parent for width adjustment */
.parent {
float: left;
clear: both;
}
.parent:hover > .bigCircle{
background: red;
}
An issue with this method is that the .bigCircle element will only change color to red when hovering anywhere on the parent, irrespective of the position of the .myCircle element. Introducing the float minimizes this effect but hovering just outside the circle will still affect the color change.
Solution 2
By utilizing the parent element as a relative container, a new element can be added to the page using the after pseudo selector when hovering over a .myCircle element:
View working example http://jsfiddle.net/CKRef/1/
HTML
<div class="parent">
<div class="mycircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* Replace .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;
}
This approach targets the first child element of the parent rather than specifically selecting the element with the class name .bigCircle. Additionally, it's important to note that the after pseudo selector is not compatible with IE7.