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

jsフィドル

于 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 に答える