html - onmouseover 文本更改编号圆圈的背景颜色

Question

我想在文本鼠标悬停时用白色填充圆圈背景，现在当我悬停在圆圈背景颜色正在改变但是我需要当我悬停在文本(选择支持层)时圆圈背景颜色会改变。

请给我一些想法...

.numberCircle {
  border-radius: 50%;
  width: 60px;
  height: 42px;
  padding: 14px 17px 12px ;
  background: #afbabc;
  border: 1px solid #ffffff;
  color: #666;
  text-align: center;
}

Answer 1

您应该使用选项的父项并更改父项的悬停状态。

您可以键入类似 parent:hover child 的内容，这就是当鼠标悬停在父元素上时您可以定位子元素的方式。

.numberCircle {
border-radius: 50%;
width: 60px;
height: 42px;
padding: 14px 17px 12px ;
background: #afbabc;
border: 1px solid #ffffff;
color: #666;
text-align: center;
}
.line{
  height:60px;
  }
.line:hover .numberCircle{
  background:lightgray;
  }

<div class="line"><span class="numberCircle">1</span> Option 1</div>
<div class="line"><span class="numberCircle">2</span> Option 2</div>
<div class="line"><span class="numberCircle">3</span> Option 3</div>
<div class="line"><span class="numberCircle">4</span> Option 4</div>