如何使用 CSS 和 HTML 更改 hover 上的链接颜色和效果？

Question

我正在尝试在这个苹果克隆网站上复制“AC Wall Plug Adapter Recall Program”文本 header，它的蓝色文本位于页脚正上方。 我已经成功地将文本居中，但是我需要一些帮助来使文本链接变为蓝色，当我将鼠标 hover 放在文本上时，它应该变成下划线。 我知道它一定是 CSS :hover选择器，但我不知道如何将它放在我的 CSS 中。 另外，我是编码的业余爱好者，所以如果你能解释我的错误而不是只给我答案，我将不胜感激，谢谢。

 .ac-pro { text-align: center; color: blue; } a.ac-pro { color: blue; }

 <div class="container"> <h2 class="ac-pro"><a href="#">AC Wall Plug Adapter Recall Program ></a></h2> </div>

Answer 1

我相信您正在尝试更改悬停时链接的颜色。

您当前使用的 CSS 不太对。 没有a.ac-pro因为 class ac-pro设置在h2上。

解决此问题的方法之一是修复 CSS 以使其适用于h2.ac-pro下面的a ：

h2.ac-pro > a {

然后只需为 hover 添加一个新的 CSS 样式：

h2.ac-pro > a:hover {

该片段显示了这一点：

 .ac-pro { text-align: center; color: blue; } h2.ac-pro > a { color: blue; } h2.ac-pro > a:hover { color: black; }

 <div class="container"> <h2 class="ac-pro"><a href="#">AC Wall Plug Adapter Recall Program ></a></h2> </div>

Answer 2

    .ac-pro {
  text-align: center;
  color: blue;
}

  .ac-pro a {
  color: blue;
text-decoration : none;

}
.ac-pro a:hover {
  color: red;

}

您没有针对 class 正确尝试此操作。

Answer 3

您没有正确应用 class 和标签。 请试试这个。 这将帮助您将文本行设为蓝色，当您使用 hover 时，它将变为下划线。

代码：

<div class="container">
<h2 class="ac-pro"><a href="#">AC Wall Plug Adapter Recall Program ></a></h2>
</div>

.ac-pro {
text-align: center;
color: blue;
}

.ac-pro > a{
text-decoration: none;
}

.ac-pro > a:hover {
 text-decoration: underline;
 }