有序列表 - 设置li翻转的数字？

Question

我已经设计了一个有序列表，以便在列表编号周围显示一个圆角框。我感兴趣的是当李徘徊时，这个盒子会改变颜色。

请参阅小提琴 - 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;
}

Answer 1

你可以通过

来做到这一点

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

Answer 2

使用：在你之前悬停：你可以做到

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

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

Answer 3

刚刚将此位添加到代码

ol.testing > li:hover:before {
    background:#000000;
}

jsfiddle http://jsfiddle.net/CH74M/1/

我不确定您要支持哪些浏览器，但之前基于http://quirksmode.org/css/contents.html的浏览器仅适用于ie8及以上的所有内容，因此悬停以便不应该出现问题