我试图在悬停时更改列表项的颜色,包括项目符号/数字和文本。我在谷歌浏览器中遇到问题,只有文字正在改变颜色。我错过了什么吗?
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/
答案 0 :(得分:5)
您可以在@Stateless
中使用子弹,然后应用任何有效的CSS:
:before
&#13;
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;
}
&#13;
答案 1 :(得分:1)
没有直接的方法可以做到这一点。您需要实现像这样的解决方法
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;
}
&#13;
<ul>
<li>test1</li>
<li>test2</li>
</ul>
&#13;
Check out this question用于实现有序列表的类似内容。
答案 2 :(得分:0)
你可以在你的CSS中做到这一点。通过添加li:before
,您可以更改项目符号和文本颜色。
li {
list-style: none;
}
li:before {
content: "• ";
color: black;
}
li:hover:before {
color: red;
}
li:hover {
color: red;
}
答案 3 :(得分:0)
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>