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

Question

I am trying to replicate the "AC Wall Plug Adapter Recall Program" text header on this apple clone website , its the blue text located right above the footer. I have succeeded in centering the text, but I need some help in making the text link blue and when I hover my mouse over the text, it should become underlined. I know it must be the CSS :hover selector, but I don't know how to place it within my CSS. Also, I am a amateur at coding, so I would really appreciate it if you could explain my mistakes instead of just giving me the answer, thank you.

 .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

I believe that you are trying to change the colour of the link when it's hovered over.

The CSS you are currently using isn't quite right. There is no a.ac-pro because the class ac-pro is set on the h2 .

Once way to resolve this is to fix the CSS so that it applies to the a underneath h2.ac-pro :

h2.ac-pro > a {

Then simply add a new CSS style for the hover:

h2.ac-pro > a:hover {

The snippet shows this in action:

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

}

you were not targetting the class properly try this it will work.

Answer 3

you are not applying class and tags properly. please try this. this will help you in making text-line blue and when you hover it it will become underline.

code:

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