Change element CSS by hovering another

Question

How can I change element CSS by hovering an another element in CSS?

We use this:

.example .example2 li:hover .element

If we have:

<div class='example'><div class='example2'><li></li></div></div>
<div class='element'></div>

But if we have:

<div class='example'><div class='example2'><li></li></div></div>
<div class='exemple2'><div class='element'></div></div>

we could not use .example .example2 li:hover .exemple2 .element

Is there any method to put the parent element .exemple2 to select his child .element in the hover?

Whilst this post is very old, just be cautious of using hover as hover doesn't really work on mobile devices :) — MyDaftQuestions, Dec 11 '15 at 08:24

score 0 · Answer 1 · answered Jul 12 '15 at 23:46

0

You can use

.exemple:hover > .exemple2 .element

answered Jul 12 '15 at 23:46

baao

it does not work for me i went to style the .element – Soufiane Douimia Jul 12 '15 at 23:52

score 0 · Answer 2 · answered Jul 13 '15 at 00:07

0

I think what you want is the adjacent sibling combinator.

answered Jul 13 '15 at 00:07

Craig Stroman

lmgonzalves · Answer 3 · 2015-07-13T00:22:00.490

0

You need to use the + selector, like:

.exemple:hover + .exemple2 .element{
    color: red;
}

edited Jul 13 '15 at 00:22

answered Jul 13 '15 at 00:16

lmgonzalves

i was thinking that is the same .example . example1 li:hover + .example2 .element this doesn't work li:hover + .example2 .element this work – Soufiane Douimia Jul 13 '15 at 00:40
@Imgonzalves this is my demo https://jsfiddle.net/cz6L7ctu/1/ – Soufiane Douimia Jul 13 '15 at 00:56
Oh I see, then it's not possible with CSS3, see [this question](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). And please delete the comments to keep it clean. – lmgonzalves Jul 13 '15 at 01:29

3 Answers3