Change an element style by hovering another

Question

The goal

Change an element by hovering another with CSS.

I don't know the syntax. Any ideas?

I want to change .frame by hovering .app > a. The CSS syntax is spotlighted below:

.app a:hover ->¹ .frame {
    background-color: yellow;
}

.frame {
    background-color: blue;
    width: 300px;
    height: 300px;
}

¹ just illustration.

score 3 · Accepted Answer · edited May 23 '17 at 10:31

3

Try this on for size:

.app:hover ~ .frame {
    background-color: yellow;
}

.frame {
    background-color: blue;
    width: 300px;
    height: 300px;
}

edited May 23 '17 at 10:31

Community

answered Aug 07 '13 at 14:36

Naftali

This solution is available for old browsers like IE 8? – Guilherme Oderdenge Aug 07 '13 at 14:37
@GuilhermeOderdenge Not that I know of. You will need to use javascript for older browsers. – Naftali Aug 07 '13 at 14:38
No problem ^_^ Happy to help @GuilhermeOderdenge :-D – Naftali Aug 07 '13 at 14:40
1

This works in IE7+. Also, a thing to be careful of, if .frame isn't a sibling after the link this won't work, but you can worry about that later. =) – Bill Criswell Aug 07 '13 at 14:41
Another good reference: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ – Naftali Aug 07 '13 at 14:43