更改列表项目项目符号/悬停时的编号颜色

我试图更改悬停时列表项目的颜色，项目符号/编号和文本。我在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

更改列表项目项目符号/悬停时的编号颜色

回答

相关问题