css - 如何在文档中悬停时更改下一个 N 元素

Question

我想我快到了，但在选择落在 :hover div 之外的元素时苦苦挣扎

这是 HTML:

<div class="cotainer">
<div class=box"><i>1</i><i>2</i><i>3</i><i>4</i></div>
<div class=box"><i>5</i><i>6</i><i>7</i><i>8</i></div>
</div>

这是我尝试使用但失败的 CSS:

.box:hover i:nth-child(-n+6){color:red;}

问题是只有元素 1 到 4 变为红色。

将元素 1 更改为 6 的解决方案是什么？谢谢:)

Answer 1

您可以考虑兄弟选择器 (+) 并拆分第一部分和第二部分的选择:

.box:hover i,
.box:hover + .box i:nth-child(-n+2){
  color: red;
}

<div class="cotainer">
  <div class="box"><i>1</i><i>2</i><i>3</i><i>4</i></div>
  <div class="box"><i>5</i><i>6</i><i>7</i><i>8</i></div>
</div>