时间戳

首页 > 解决方案 > 如何在文档中悬停时更改下一个 N 元素

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

问题描述

我想我快到了，但努力选择不属于 :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 的解决方案是什么？谢谢 ：）

标签： css

解决方案

这是这样的：

.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>

推荐阅读