li突出显示下一个孩子:悬停

Question

Plunker:

我有一个简单的ul:

 <ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

当鼠标悬停在li上时我需要突出显示下一个(动态).

谢谢Avi

Answer 1

简单,使用相邻的兄弟选择器(+).

li:hover + li {
  background: red;
}

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>