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-image CSS属性

更改项目符号图像

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; }