CSS列表:用图像替换子弹并添加悬停

Question

我有一个无序列表,如下所示:

<ul>
<li><a href="test.html">Item 1<li>
<li><a href="test2.html">Item 2</li>
<li><a href="test3.html">Item 3</li>
</ul>

我希望每个列表项左侧出现的项目符号都被一个朝右的三角形替换.三角形及其旁边的文本应在悬停时更改颜色.

CSS可以产生一个三角形,但它在较小的尺寸下显得不稳定.因此,我只是在寻找允许我编辑两个不同三角形图像的链接位置的代码.

Answer 1

首先,您的HTML无效(您需要关闭锚标记).

您可以使用list-style-imageCSS属性更改项目符号图像

ul { list-style-image: url('url-of-bullet1.png'); }

并且您可以在悬停时以相同的方式更改它,但是通过使用悬停选择器使其仅应用于光标所在的项目:

ul li:hover { list-style-image: url('url-of-bullet2.png'); }

至于更改文本颜色,可以使用列表项上的悬停选择器为锚元素更改它,如下所示:

ul li:hover a { color: #f00; }