Question

<html>
<head>

<style type='text/css'>
ol li{background-color:green;}
ol li:hover{background-color:lightgreen;}
</style>

</head>

<body>

<ol>
  <li>This is first line</li>
  <li>Here is second line</li>
  <li>And last line</li>
</ol>

</body>
</html>

如果我们使用此编码，当鼠标悬停时，数字的背景颜色不会改变。当我们鼠标悬停时，我也希望更改数字的背景颜色，我们怎么做呢。

Answer 1

你有几个选择，第一个是使用：list-style-position: inside;：

ol li{background-color:green; list-style-position: inside;}
ol li:hover{background-color:lightgreen;}

JS Fiddle demo

第二个是使用生成的内容：

ol {
    counter-reset: listNumber;
}
ol li {background-color:green; list-style-type: none; counter-increment: listNumber; position: relative; }
ol li:before {
    content: counter(listNumber);
    background-color: green;
    position: absolute;
    top: 0;
    left: -2em;
    width: 1.6em;
    display: block;
}
ol li:hover,
ol li:hover:before {background-color:lightgreen;}

JS Fiddle demo

后一种方法，使用生成的内容，可能是更好的方法，但跨浏览器支持较弱;为it fails in IE<8 (though is supported in IE8+)。

Answer 2

不仅应该使用list-style-position，还要使用text-indent http://jsfiddle.net/HerrSerker/QtRwa/

ol {
    list-style-position: inside;
    padding-left: 0;
    overflow: hidden;
}
ol li {
    background-color:green;
    text-indent: -20px;
    padding-left: 20px;
}

关于造型订单清单

2 个答案: