CODEWITHSUNDEEP
css
Anraiki
Anraiki

Reputation: 796

Changing other elements in CSS

I have always wonder why this wouldn't work as it would make so much sense.

CSS:

#button1:hover {
    background: green;
    #button2 {
        background: red;
    }
}

HTML

<button id="button1"></button>
<button id="button2"></button>

If I hover over Button1, Button2's background should also change.

Is there a workaround to this other than the use of Javascript?

Upvotes: 0

Views: 60

Answers (2)

seahorsepip
seahorsepip

Reputation: 4819

You can use the adjacent selector,

#button1:hover {
    Background: green;
}
#button1:hover + #button2 {
    Background: red;
}

Have a look at all the css selectors: http://css-tricks.com/almanac/

Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.

Upvotes: 4

Creaven
Creaven

Reputation: 319

This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.

Upvotes: 0

Related Questions