Twitter Bootstrap Question posted in

Anchor tag CSS styles not applying-Twitter bootstrap

I’m not sure how to explain this, but I just started coding and learning.

I’m pretty knowledgeable with the basics of HTML and CSS. I’m having trouble wondering why when I hover over my H1 that it turns blue and that theres an underline that is blue. I only want one line, and I want it to be 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;
}

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/[email protected]/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>
Tags:

2

Answers


  1. 0

    There is an a tag inside your h1. By default for most browsers the a tag is styled like that.

    With this rule everything is correct:

    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/[email protected]/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>
    Login or Signup to reply.
  2. 0

    The issue is that when you hover over the <a> tag for your name, the default :hover style of the <a> tag applies. you need to change this to remove text-decoration and also change the font color to gold.

    .name:hover {
  text-decoration: none;
  color: gold; 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search