Question

我正在上市。我正在使用：before和counter（item）因为我不想要列表项中的句点。现在我试图让悬停效果试图在悬停时交换图像，但它无法正常工作。我可以获得任何帮助，如何让它悬停和活跃课程？我正在做的是不能正常工作。请在下面查看我的代码。

我希望红色bg应该变为绿色。不像那个人现在正在工作。

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

JSFiddle

Answer 1

您还必须为:before伪元素设置悬停。检查 DEMO 。

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

Answer 2

您需要编写一个表达:hover和:before伪类的选择器：

li:hover:before {
  background: green; 
}

得到ol li：在悬停问题之前

2 个答案: