CODEWITHSUNDEEP
htmlcss
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

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

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

Upvotes: 1

Views: 3348

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37665

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 after all of the .myCircle elements.

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:

Working example: http://jsfiddle.net/CKRef/

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:

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

/* 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 not supported in IE7.

Upvotes: 5

gp.
gp.

Reputation: 8225

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}

Upvotes: 1

Related Questions