如何在文档中的悬停上更改下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>

Answer 2

这是方法：

.container:hover > .box:nth-child(1){
  color: red;
}

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

<div class="container">
  <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>