更改列表項目項目符號/懸停時的編號顏色

我試圖更改懸停時列表項目的顏色，項目符號/編號和文本。我在Google Chrome瀏覽器中遇到了一個問題，只有文本正在改變顏色。我錯過了什麼嗎？更改列表項目項目符號/懸停時的編號顏色

HTML：

<ul> 
    <li>test</li> 
</ul> 

<ol> 
    <li>test</li> 
</ol>

CSS：

ol li:hover, 
ul li:hover { 
    color: red; 
}

的jsfiddle： https://jsfiddle.net/yf0yff1c/2/

來源

2015-12-11 gomezfx

[見此答案]（http://stackoverflow.com/a/1470223/2572316） – Topr

重複：http://stackoverflow.com/questions/1470214/change-bullets-color-of-an -html-list-without-using-span –

@Topr這將適用於無序列表，但是如何訂購？ – gomezfx

你可以有子彈:before，比申請任何有效的CSS：

li { 
 
    list-style: none; 
 
} 
 
li:before { 
 
    content: "• "; 
 
    color: black; 
 
} 
 
ol { 
 
    counter-reset: item; 
 
} 
 
ol li { 
 
    display: block; 
 
} 
 
ol li:before { 
 
    content: counter(item)". "; 
 
    counter-increment: item; 
 
    color: black; 
 
} 
 
li:hover:before { 
 
    color: red; 
 
}

<ul> 
 
    <li>HOVER ME</li> 
 
</ul> 
 

 
<ol> 
 
    <li>HOVER ME</li> 
 
</ol>

來源

2015-12-11 08:19:18 Justinas

我已經更新了我的問題，以便更清楚。我需要更改有序列表和無序列表的顏色。 – gomezfx

@gomezfx將用'ul'和'ol'更新答案 – Justinas

沒有直接的方法來做到這一點。您需要實現一種解決方法是這樣

ul { 
 
     list-style: none; 
 
    } 
 

 
    ul li:before { 
 
     content:"\2022"; 
 
     margin-right: 5px; 
 
     font-size: 20px; 
 
     font-weight: bold; 
 
    } 
 

 
    ul li:hover { 
 
     color: red; 
 
    } 
 

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

<ul> 
 
<li>test1</li> 
 
<li>test2</li> 
 
</ul>

Check out this question用於實現有序列表類似的東西。

來源

2015-12-11 08:22:29 Shuvro

你可以在你的css中做到這一點。通過添加li:before，您可以更改項目符號和文本顏色。

li { 
    list-style: none; 
} 
li:before { 
    content: "• "; 
    color: black; 
} 
li:hover:before { 
    color: red; 
} 
li:hover { 
    color: red; 
}

來源

2015-12-11 08:22:47

更改列表項目項目符號/懸停時的編號顏色

回答

相關問題