悬停时更改列表项项目符号/编号颜色
[英]Changing list item bullet/number color on hover
问题描述
I'm trying to change a list item's color on hover, both the bullet/number and the text.
我正在尝试在悬停时更改列表项的颜色，包括项目符号/编号和文本。 I'm encountering a problem in Google Chrome where only the text is changing color.我在 Google Chrome 中遇到了一个问题，只有文本在改变颜色。 Am I missing something?我错过了什么吗？
HTML: HTML：
<ul>
<li>test</li>
</ul>
<ol>
<li>test</li>
</ol>
CSS: CSS：
ol li:hover,
ul li:hover {
color: red;
}
JSFiddle: https://jsfiddle.net/yf0yff1c/2/ JSFiddle： https ://jsfiddle.net/yf0yff1c/2/
4 个解决方案
解决方案1
6 已采纳 2015-12-11 08:19:18
You can have bullet in :before and than apply any valid CSS for that:您可以在:before项目符号， :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>
解决方案2
1 2015-12-11 08:22:29
There is no direct way to do this.没有直接的方法可以做到这一点。 You need to implement a workaround like this您需要实施这样的解决方法
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 for implementing something similar for ordered list. 查看此问题以对有序列表实施类似的操作。
解决方案3
0 2015-12-11 08:22:47
You can do this in your css.你可以在你的css中做到这一点。 By adding the li:before , you can change both the bullet and the text color.通过添加li:before ，您可以更改项目符号和文本颜色。
li {
list-style: none;
}
li:before {
content: "• ";
color: black;
}
li:hover:before {
color: red;
}
li:hover {
color: red;
}
解决方案4
0 2021-07-14 21:18:36
li:hover { color: green; } li::marker { color: red; } li:hover::marker { color: blue; } .decrease-spacing { text-indent: -8px; } .increase-spacing { text-indent: 20px; }
<body> <ul> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li> <li>Lorem, ipsum dolor.</li> <li class="decrease-spacing">Lorem, ipsum dolor.</li> <li class="increase-spacing">Lorem, ipsum dolor.</li> </ul> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.