时间戳

首页 > 解决方案 > 悬停时无序列表中的 HTML 链接不改变颜色

html - 悬停时无序列表中的 HTML 链接不改变颜色

问题描述

我正在尝试创建一个与吉他相关的网站并在此过程中学习 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;
}

标签： htmlcssdebugging

解决方案

当涉及到伪选择器时，它们以特定的顺序工作。所以层次结构如下：

  • ：关联
  • :访问过
  • :hover, :focus
  • ：积极的

您想要实现的目标可以通过这些简单的修改来完成：

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

从您的 CSS 中删除 a:visited 选择器，因为它不需要，删除 a:link 并仅将其作为 a 标记。

我相信这就是你所追求的。

推荐阅读