3

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

见小提琴 - 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;
}
4

3 回答 3

1

你可以这样做

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

jsFiddle

于 2012-12-30T06:04:00.910 回答
1

使用 :hover before :before 你可以做到

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

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

于 2012-12-30T06:06:11.057 回答
0

刚刚将这一位添加到代码中

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

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

我不确定您要支持哪些浏览器，但基于http://quirksmode.org/css/contents.html之前仅适用于 ie8 及更高版本的所有浏览器，悬停也是如此，这应该不是问题

于 2012-12-30T06:03:24.203 回答