0

I'm trying to figure out why the background of classes 'b' aren't changing when hovering over class 'a', as in this question. How can I get this to work? I'd also like it to work with the a tag.

Thanks for any help!

.a {
  width: 200px;
  height: 200px;
  background: orange;
}
.b {
  background: lightgreen;
}
.a:hover + .b {
    background: #ccc;
}
<div class='a'>
  <span class='b'>here</span>
  <span class='b'><a href='http://www.google.com'>here</a></span>
</div>
user8758206
  • 2,106
  • 4
  • 22
  • 45
  • 1
    If your CSS isn't working then it's - mostly - a problem with the selectors you're using, and if your selector isn't working it's always a good idea to look at the W3's documentation for selectors: https://www.w3.org/TR/css3-selectors/ – David Thomas Jan 07 '18 at 20:58

1 Answers1

3

You are using the wrong selector, you should be using the direct child combinator or > instead since span's are inside the div:

.a {
  width: 200px;
  height: 200px;
  background: orange;
}
.b {
  background: lightgreen;
}
.a:hover > .b {
    background: #ccc;
}
<div class='a'>
  <span class='b'>here</span>
  <span class='b'><a href='http://www.google.com'>here</a></span>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46