Html 文本移动时更改编号圆圈的背景色

我想在文本鼠标悬停时用白色填充圆圈背景，现在当我在圆圈上悬停时，背景颜色正在更改，但当我在文本上悬停时，我需要（选择支持层）圆圈背景颜色将更改

请给我一些想法

.numberrcle{
边界半径：50%；
宽度：60px；
高度：42px；
填充：14px 17px 12px；
背景：#afbabc；
边框：1px实心#ffffff；
颜色：#666；
文本对齐：居中；
}

---

假设您的代码如下所示，只需将选择器添加到父级（

li

）

正文{
背景：灰色；
}
保险商实验室{
利润率：20px0；
填充：0；
列表样式：无；
}
李{
颜色：#fff；
}
.数字圆圈{
边界半径：50%；
宽度：60px；
高度：42px；
填充：14px 17px 12px；
背景：#afbabc；
边框：1px实心#ffffff；
颜色：#666；
文本对齐：居中；
}
李：悬停。数字圆圈{
背景：#fff；
颜色：#afbabc；
}

1.
支撑层

您应该与选项的父项一起工作，并更改父项的悬停状态

您可以键入类似于

parent:hover child

的内容，这就是当鼠标悬停在父元素上时，如何定位子元素的方法

.numberrcle{
边界半径：50%；
宽度：60px；
高度：42px；
填充：14px 17px 12px；
背景：#afbabc；
边框：1px实心#ffffff；
颜色：#666；
文本对齐：居中；
}
.线路{
高度：60px；
}
.行：悬停。数字循环{
背景：浅灰色；
}

1选项1
2备选方案2
3备选方案3
4选项4检查以下内容：

HTML:

<div class="outer">
  <span class="circle">1.</span>
  <span class="text">Some text</span>
</div>

请提供一些代码您的代码在哪里？@AnkitGupta我已经更新了我的code@websmentor.com所以请回答这个问题，这样对其他人会有帮助。你的代码是正确的。默认情况下需要一些帮助。我想显示选定的第一个圆圈，如果我在其他圆圈上悬停，则默认圆圈背景色将变为
.circle{
  display: inline-block;
  background-color: #000;
  color: #FFF;
  width: 2em; height: 2em;
  text-align: center; line-height: 2em;
  border-radius: 100%;

  transition: background-color .2s;
}
.outer{
  cursor: pointer;
  display: inline-block;
}
.outer:hover .circle{
  background-color: #999
}