悬停时无序列表中的HTML链接不会更改颜色

Question

我正在尝试创建一个与吉他相关的网站，并在此过程中学习html和css，但遇到一个问题：我创建了一个列表，其中所有元素都是链接，我想要它们为白色，但悬停时会变为黄色。我似乎无法同时实现这两个目标。它们要么总是白色，要么将鼠标悬停时变成黄色，否则保持紫色。

我尝试将悬停函数创建为id（仅使用一次，就像对id一样），创建具有所有必要类的div，将悬停函数插入ul列表或每个列表中元素或链接描述。到目前为止没有任何进展。

HTML和CSS（独立文件）：     

<div class="ul2 alink1 ahover1 avisited1">

<ul>

<li><a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank" 
>Electric guitars</a></li>

<li><a href="https://en.wikipedia.org/wiki/Acoustic_guitar" target="_blank" 
>Acoustic guitars</a></li>

<li><a href="https://en.wikipedia.org/wiki/Semi-acoustic_guitar" 
target="_blank" >Semi-acoustic/semi-hollow guitars</a></li>

<li><a href="https://en.wikipedia.org/wiki/Guitar_synthesizer#MIDI_guitars" 
target="_blank" >MIDI-guitars</a></li>

</ul>

</div>

</body>


.body {
background-color:black;
}
.alink1 a:link {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}
.avisited1 a:visited {
color:white;
}
.ul2 {
list-style-type:circle;
color:white;
} 

Answer 1

对于伪选择器，它们以特定顺序工作。因此，层次结构如下：

• ：链接
• ：已访问
• ：悬停，：focus
• ：活动

您可以通过以下简单的修改来实现：

.alink1 a {
text-decoration:none;
font-size:26px;
font-style:italic;
color:white;
}
.ahover1 a:hover {
color:yellow;
}

由于不需要，从CSS中删除了a：visited选择器，请删除a：link并将其仅用作标记。

我相信这就是你的追求。