Reputation: 3512
I have stylized an ordered list to show a rounded box around the number of the list. What I am interested in doing is having this box change color when the li is hovered.
See fiddle - http://jsfiddle.net/CH74M/
<ol class="testing">
<li>Test number 1</li>
<li>Test number 2</li>
<li>Test number 3</li>
</ol>
ol.testing {
counter-reset:li; /* Initiate a counter */
margin:0 0 0 45px;
}
ol.testing > li {
position:relative; /* Create a positioning context */
margin:0 0 30px 2em; /* Give each list item a left margin to make room for the numbers */
padding:3px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
}
ol.testing > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
font-size:15px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
color:#fff;
background:#2363a1;
font-weight:bold;
text-align:center;
}
Upvotes: 3
Views: 2034
Reputation: 7281
With :hover before :before you can do it
ol.testing > li:hover:before {
color: #090;
}
Upvotes: 1
Reputation: 28750
Just added this bit to the code
ol.testing > li:hover:before {
background:#000000;
}
jsfiddle http://jsfiddle.net/CH74M/1/
I'm not sure which browsers you want to support, but based on http://quirksmode.org/css/contents.html before is only available on everything ie8 and up, and so is hover so that shouldn't be a problem
Upvotes: 0