getting ol li :before hover issue

Question

I am having ol li for listing. I am using :before and counter(item) because i dont want the period in the list item. Now i am trying to make it hover effect trying to swap image on hover but its not working properly. Can I get any help how can I make it hover and active class? What I am doing is not working properly. Please check below my code.

I want the red bg should change to green. Not like the one is working now.

.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

We'd need to see a JSFiddle. Your code is **very** hard to read formatted like that. — Paulie_D, Jul 22 '14 at 16:23

score 0 · Accepted Answer · answered Jul 22 '14 at 17:42

0

you have to set hover for :before pseudo element as well. check the DEMO.

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

answered Jul 22 '14 at 17:42

Kheema Pandey

9,977
4
25
26

score 0 · Answer 2 · answered Jul 22 '14 at 17:42

0

You need to write a selector that expresses both the :hover and :before pseudoclasses:

li:hover:before {
  background: green; 
}

answered Jul 22 '14 at 17:42

KatieK

13,586
17
76
90

getting ol li :before hover issue

2 Answers2