Html 获取ol li：悬停前问题

我有欧利上市。我使用：before和counter（item），因为我不想在列表项中使用句点。 现在，我试图使其悬停效果试图交换悬停图像，但它不能正常工作。我可以得到任何帮助吗？我如何使它悬停和活动类？ 我正在做的工作不正常。请检查下面我的代码

我想红色背景应该变成绿色。不像现在正在工作的那个

.widget-content ol {
  counter-reset: item; 
  margin: 0 0 15px 0; 
  padding-left: 0
 }

.widget-content li {
  display: block; 
  margin-bottom: .5em; 
  margin-left: 2em; 
  color:#999; 
  font-size:12px; 
  font-weight:bold
}

.widget-content li:before {
  background:red; 
  color: #FFFFFF; 
  content: counter(item, decimal) " "; 
  counter-increment: item; 
  display: inline-block; 
  font-size:9px; 
  font-weight: bold;  
  line-height: 18px;  
  margin-left: -29px;  
  padding: 0 0 0 10px;  
  width: 2em
 }

.widget-content li a { 
  color:#999; 
  font-weight:bold
 }

.widget-content li:hover { 
  border:red solid 1px; 
  background: green;
 }

.widget-content li span.commentsCont, 
.widget-content li span.heartCont {
  width:25px; margin-left:0; text-align:right; color:#3b3b3b
 }

.widget-content li span.heartCont { 
  margin-right:5px
 }

---

您必须为

：在
伪元素之前设置悬停。检查

.widget-content li:hover, .widget-content li:hover:before { 
  border:red solid 1px; 
  background: green;
 }

您需要编写一个选择器来表示
：hover
和
：before
伪类：

li:hover:before {
  background: green; 
}

请把你的html代码和一把小提琴贴出来。我们需要看看JSFIDLE。您的代码很难读取，格式是这样的。您没有一个
：before
和一个
：hover
作为选择器。