About styling order list
<html>
<head>
<style type='text/css'>
ol li{background-color:green;}
ol li:hover{background-color:lightgreen;}
</style>开发者_JAVA技巧
</head>
<body>
<ol>
<li>This is first line</li>
<li>Here is second line</li>
<li>And last line</li>
</ol>
</body>
</html>
if we use this coding the number's background color is not changing when we mouse over. i want to change the number's background color too when we mouse over, how can we do it.
You've got a couple of options, the first is to use: list-style-position: inside;:
ol li{background-color:green; list-style-position: inside;}
ol li:hover{background-color:lightgreen;}
JS Fiddle demo.
And the second is to use generated content:
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.
The latter approach, using generated content, is probably the better approach but with weaker cross-browser support; as it fails in IE<8 (though is supported in IE8+).
not only list-style-position should be used, but also 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;
}
加载中,请稍侯......
精彩评论