1

I tried both of these, but both are working same.

div:hover div
{
.....
}

div:hover + div
{
.....
}

Still there is any difference between these?

  • this might help you: http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean – João Vilaça May 16 '15 at 15:42
  • [**The 30 CSS Selectors you Must Memorize**](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) – Paulie_D May 16 '15 at 15:43

1 Answers1

3

div:hover div will style a div inside the hovered div:

<div>
  I'm hovered.

  <div>
    So I'm styled.
  </div>
</div>

div:hover + div will style the div following the hovered div:

<div>
  I'm hovered.
</div>
<div>
  So I'm styled.
</div>


div {
  border: 1px solid #000;
  padding: 3px;
}

div.styleinner:hover div {
  background-color: red;
}

div.stylenext:hover + div {
  background-color: red;
}
<div class="styleinner">Hover me
  <div>and I get styled</div>
</div>
<div>but I won't</div>

<div class="stylenext">Hover me
  <div>and I won't get styled</div>
</div>
<div>but I will</div>
Paul Roub
  • 36,322
  • 27
  • 84
  • 93