CODEWITHSUNDEEP
csshtml-lists
user756659
user756659

Reputation: 3512

Ordered list - style the number on li rollover?

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

Answers (3)

Ahmad Ajmi
Ahmad Ajmi

Reputation: 7281

With :hover before :before you can do it

ol.testing > li:hover:before {
  color: #090;
}

http://jsbin.com/ifeyaw/1/

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57342

you can do this by 

ol li:hover:before { 
   color: red; 
}

jsFiddle

Upvotes: 1

Mathew Berg
Mathew Berg

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

Related Questions