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的内容，以及当鼠标悬停在父元素上时如何定位子元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查一下：

<强> HTML：

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

<强> CSS

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

http://codepen.io/anon/pen/PzOBRv

Answer 3

假设您的代码如下所示，只需将:hover选择器添加到父代（在这种情况下为li）。

body {
  background:gray;  
}

ul {
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

li {
  color:#fff;  
}

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

li:hover .numberCircle {
  background: #fff;
  color:#afbabc;
}

<ul>
  <li>
    <span class="numberCircle">1</span>
    <span>Support Layer</span>
  </li>
</ul>