CSS :hover on other element?

Question

Short question: Why does the background-color of .b does not change when I hover? .a?

CSS

.a {
    color: red;
}

.b {
    color: orange;
}

.a:hover .b {
    background-color: blue;
}

HTML

<div id="wrap">
    <div class="a">AAAA</div>
    <div class ="b">BBBB</div>
</div>

http://jsfiddle.net/2NEgt/

For your CSS code to work, the second div should be embedded within the first one. — rhino, Jul 16 '12 at 15:30

Ana · Accepted Answer · 2015-01-02T12:07:18.017

45

You need to have .a:hover + .b instead of .a:hover .b

.a:hover .b would work for a structure like

<div class="a">AAAA
  <div class ="b">BBBB</div>
</div>

If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.

Demo http://jsfiddle.net/thebabydino/EajKf/

edited Jan 02 '15 at 12:07

answered Jul 16 '12 at 15:33

Ana

35,599
6
80
131

score 6 · Answer 2 · answered Jul 16 '12 at 15:33

6

Can you not do something like a:hover + b? see http://meyerweb.com/eric/articles/webrev/200007a.html

answered Jul 16 '12 at 15:33

Josh

3,445
5
37
55

score 6 · Answer 3 · answered Jul 16 '12 at 15:34

6

You can use + selector

.a:hover + .b {
    background-color: blue;
}

to apply the css for sibling element, or

.a:hover > .b {
    background-color: blue;
}

for nested class.

answered Jul 16 '12 at 15:34

Stano

8,749
6
30
44

score 3 · Answer 4 · answered Jul 16 '12 at 15:30

3

because .b isn't a child of .a, so that selector isn't finding anything. Use javascript to do what you want to do there.

answered Jul 16 '12 at 15:30

Tallboy

12,847
13
82
173

score 2 · Answer 5 · edited Jul 22 '12 at 08:51

2

There are two things you can do.

Either change your HTML to make .b a child of .a

<div id="wrap">
    <div class="a">AAAA
       <div class ="b">BBBB</div>        
    </div>
</div>

OR

Change your css to use the adjacent selector

.a:hover + .b {
    background-color: blue;
}

edited Jul 22 '12 at 08:51

Nikola K.

7,093
13
31
39

answered Jul 16 '12 at 15:34

Jared

12,406
1
35
39

score 1 · Answer 6 · answered Jul 16 '12 at 15:34

1

no js needed http://jsfiddle.net/2NEgt/3/

answered Jul 16 '12 at 15:34

Nicholas King

938
7
22

score 0 · Answer 7 · answered Jul 16 '12 at 15:30

0

You shouldn't change a sibling's style when an event occurs on a different element. It's out of the context of CSS.

Use JavaScript to achieve this, for example:

var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
    bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
    bDiv.style.backgroundColor = "white";
};

answered Jul 16 '12 at 15:30

Madara's Ghost

172,118
50
264
308

6

Actually, you can, using sibling selector `.a:hover + .b` or `.a:hover ~ .b` – Ana Jul 16 '12 at 15:32
i dont know why this has been upvoted as what @Ana has said is true – Nicholas King Jul 16 '12 at 15:33

score 0 · Answer 8 · answered Jun 14 '14 at 14:55

try to understanding this example:
html code

<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>

<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}

when you hover on the box 1 than the box 3 will get black color

score 0 · Answer 9 · answered Sep 03 '14 at 23:25

Jquery is a good and easy solution:

html:

<div class="a">AAA</div>
<div class="b">BBB</div>

script: Put this script into your html if you want. That's all.

<script>
      $(".a").mouseover(function(){
        $(".b").css("color", "blue"); 
      });
      $(".a").mouseleave(function(){
        $(".b").css("color", "red");
      });
</script>

CSS :hover on other element?

9 Answers9

Linked