css - 有序列表 - 在 li 翻转时设置数字样式？

Question

我对有序列表进行了样式化，以在列表编号周围显示一个圆 Angular 框。我感兴趣的是当 li 悬停时让这个框改变颜色。

参见 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;
}

Answer 1

用 :hover before :before 你可以做到这一点

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

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