锚标签CSS样式不适用

时间：2020-09-29 21:42:13

标签： css

我不确定该如何解释，但是我刚刚开始编码和学习。

我非常了解HTML和CSS的基础知识。我想知道为什么当我将鼠标悬停在H1上时，它变成蓝色并且底线是蓝色。我只想要一条线，我希望它是金。

body {
  background-image: url(https://i.pinimg.com/originals/5c/e5/5f/5ce55f2b0cedcf3bfedef36dfa38df33.jpg);
}

h1 {
  font-family: Orbitron, sans-serif;
  color: white;
  text-align: center;
  margin-top: 300px;
}

h2 {
  font-family: Orbitron, sans-serif;
  text-align: center;
  color: white;
}

.name {
  position: relative;
  color: gold;
}

.name::before {
  background-color: gold;
}

.name::after {
  color: gold;
  text-decoration-color: gold;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: gold;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease-in;
}

.name:hover::after {
  transform: scaleX(1);
  color: gold;
  border-color: gold;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a:hover {
  background-color: #d9d9d9;
}

.facebook {
  background: #3B5998;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 300px;
  top: 300px;
}

.twitter {
  background: #55ACEE;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 340px;
  top: 120px;
}

.google {
  background: #dd4b39;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 500px;
  top: 50px;
}

.linkedin {
  background: #007bb5;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 600px;
  top: 340px;
}

.youtube {
  background: #bb0000;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 650px;
  top: 240px;
}

.aboutme {
  background-image: url();
  margin-top: 500px;
}

.table {
  text-align: center;
  color: #fe019a;
  margin: 1000px 10px;
  display: inline;
  margin-left: 575px;
}

.phone {
  width: 2%;
  position: absolute;
  margin-left: 36%;
  margin-top: 100px;
  border-radius: 50%;
}
<!doctype html>``
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Drake Coleman</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link rel="stylesheet" href="CSS/styles.css">
  <link rel="icon" href="favicon_io/android-chrome-512x512.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="">


    <h1><a class="name" href="#">Drake Coleman</a></h1>
  </div>
  <h2>Jr. Developer</h2>
  <div class="icon-bar">
    <a href="https://www.facebook.com/dra.drizzy/" class="facebook"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/DraDraDrizzy" class="twitter"><i class="fa fa-twitter"></i></a>
    <a href="#" class="google"><i class="fa fa-google"></i></a>
    <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
    <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
  </div>
  <br>

  <div class="aboutme">
    <h1>Classified Information</h1>
    <img class="phone" src="PHONE.png" alt="">
    <table class="table">
      <tr>
        <td>Age</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Birthdate</td>
        <td>February 26th, 1991</td>
      </tr>
      <tr>
        <td>Phone Number</td>
        <td>260-7100-7671</td>
      </tr>
      <tr>
        <td>Address</td>
        <td>Columbus, Ohio</td>
  </div>

  </table>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

您的a中有一个h1标签。对于大多数浏览器，默认情况下a标签的样式是这样的。

使用此规则，一切正确：

h1 a:hover {
  text-decoration: none;
  color: gold;
}


body {
  background-image: url(https://i.pinimg.com/originals/5c/e5/5f/5ce55f2b0cedcf3bfedef36dfa38df33.jpg);
}

h1 {
  font-family: Orbitron, sans-serif;
  color: white;
  text-align: center;
  margin-top: 300px;
}


h1 a:hover {
  text-decoration: none;
  color: gold;
}

h2 {
  font-family: Orbitron, sans-serif;
  text-align: center;
  color: white;
}

.name {
  position: relative;
  color: gold;
}

.name::before {
  background-color: gold;
}

.name::after {
  color: gold;
  text-decoration-color: gold;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: gold;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease-in;
}

.name:hover::after {
  transform: scaleX(1);
  color: gold;
  border-color: gold;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a:hover {
  background-color: #d9d9d9;
}

.facebook {
  background: #3B5998;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 300px;
  top: 300px;
}

.twitter {
  background: #55ACEE;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 340px;
  top: 120px;
}

.google {
  background: #dd4b39;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 500px;
  top: 50px;
}

.linkedin {
  background: #007bb5;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 600px;
  top: 340px;
}

.youtube {
  background: #bb0000;
  color: white;
  border-radius: 50%;
  position: absolute;
  left: 650px;
  top: 240px;
}

.aboutme {
  background-image: url();
  margin-top: 500px;
}

.table {
  text-align: center;
  color: #fe019a;
  margin: 1000px 10px;
  display: inline;
  margin-left: 575px;
}

.phone {
  width: 2%;
  position: absolute;
  margin-left: 36%;
  margin-top: 100px;
  border-radius: 50%;
}
<!doctype html>``
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Drake Coleman</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link rel="stylesheet" href="CSS/styles.css">
  <link rel="icon" href="favicon_io/android-chrome-512x512.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="">


    <h1><a class="name" href="#">Drake Coleman</a></h1>
  </div>
  <h2>Jr. Developer</h2>
  <div class="icon-bar">
    <a href="https://www.facebook.com/dra.drizzy/" class="facebook"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/DraDraDrizzy" class="twitter"><i class="fa fa-twitter"></i></a>
    <a href="#" class="google"><i class="fa fa-google"></i></a>
    <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
    <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
  </div>
  <br>

  <div class="aboutme">
    <h1>Classified Information</h1>
    <img class="phone" src="PHONE.png" alt="">
    <table class="table">
      <tr>
        <td>Age</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Birthdate</td>
        <td>February 26th, 1991</td>
      </tr>
      <tr>
        <td>Phone Number</td>
        <td>260-7100-7671</td>
      </tr>
      <tr>
        <td>Address</td>
        <td>Columbus, Ohio</td>
  </div>

  </table>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

答案 1 :(得分：0)

问题在于，当您将鼠标悬停在名称的<a>标记上时，将应用:hover标记的默认<a>样式。您需要进行更改以删除text-decoration，并将字体颜色更改为金色。

.name:hover {
  text-decoration: none;
  color: gold; 
}
相关问题
最新问题