HTML, CSS does not want to remove the underline-CodePudding

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coding Progress</title>
  <link rel="stylesheet" href="./stylesheet.css">
</head>


<body>

  <article>
    <header>
      <h1>Coding Path</h1>
      <h2>HTML CSS</h2>

    </header>

    <p>
        Computer programming is the process of performing a particular computation, usually by 
        designing and building an executable computer program.
        Programming involves tasks such as analysis, generating algorithms, profiling algorithms' 
        accuracy and resource consumption, and the implementation of algorithms.
    </p>

    <p>
      For young learners, programming helps to gain problem-solving skills i.e. to solve a problem in a logical as well as creative way. 
      Coding also enhances thinking ability and enables one to think logically, strategically and analytically.
    </p>
    <br>
    

    <footer>
      <a href="https://www.linkedin.com/in/realmilanez">
        <img src="./images/Dubai.png" alt="Dubai, Burj Khalifa">
      </a>

      <br><br>
      <q style="font-size:13px;">Make it work, make it right, make it fast.</q>

    </footer>


  </article>




</body>


</html>

Currently I am able to operate with .css finally, however when I hover my mouse on the picture, it creates red underline on the right side of it. How am I able to mark the exact image and make the program to ignore the underline, so only the border becomes white while hovering...

Here's the code in .CSS:

a:link {
  color            : green;
  background-color : transparent;
  text-decoration  : none;
  }
a:visited {
  color            : pink;
  background-color : transparent;
  text-decoration  : none;
  }
a:hover {
  color            : red;
  background-color : transparent;
  text-decoration  : underline;
  }
a:active {
  color            : yellow;
  background-color : transparent;
  text-decoration  : underline;
  }
footer a:hover img, 
footer a:active img {
  color           : white;
  border-color    : white;
  text-decoration : none;
}  

  body {
    color:rgb(240,240,240);
    background: rgb(27,39,51);
    font-family: Roboto, Helvetica, Arial, Sans-serif;
    text-align: center;
    }


  footer img {
    width: 80px;
    border-radius: 70%;
    border: 2px solid orange;
    }


  h1, h2, h3 {
    margin:0;
    }


  h2 {
    font-size:16px;
    text-transform: uppercase;
    margin-top: 8px;
    }


  h1, strong, em {
    
    color: orange;
    }

  
  article {
    border: 1px solid #ccc;
    padding: 50px;
    margin: 50px auto;
    max-width: 420px;
  }

The image does not remove the red underline even though the code says to remove the decoration in the last last section

The problem is shown here<----

CodePudding user response：

footer a:hover, footer a:active {
      text-decoration: none;
}

CodePudding user response：

<footer>
      <a href="https://www.linkedin.com/in/realmilanez">
        <img src="./images/Dubai.png" alt="Dubai, Burj Khalifa">
      </a>
    </footer>

I did it wrong and I should have closed the </footer> after that, however I added following code inside of it and it did not work just because of that.

<br><br>
   <q style="font-size:13px;">Make it work, make it right, make it fast.</q>

CodePudding user response：

footer:hover {
  text-decoration: none;
}

CodePudding user response：

Hey @realmilanez I edit your code and run the browser then I fixed this issue you can look at the css added this code in your stylesheet I comment this code.

a:link {
    color            : green;
    background-color : transparent;
    text-decoration  : none;
    }
  a:visited {
    color            : pink;
    background-color : transparent;
    text-decoration  : none;
    }
  a:hover {
    color            : red;
    background-color : transparent;
    text-decoration  : underline;
    }
  a:active {
    color            : yellow;
    background-color : transparent;
    text-decoration  : underline;
    }
  footer a:hover>img, 
  footer a:active img {
    color           : white;
    border-color    : white;
    text-decoration : none;
  }  

  /* added this code in your stylesheet */
  footer a:hover {
    text-decoration : none;
  }  

  
    body {
      color:rgb(240,240,240);
      background: rgb(27,39,51);
      font-family: Roboto, Helvetica, Arial, Sans-serif;
      text-align: center;
      }
  
  
    footer img {
      width: 80px;
      border-radius: 70%;
      border: 2px solid orange;
      }
  
  
    h1, h2, h3 {
      margin:0;
      }
    h2 {
      font-size:16px;
      text-transform: uppercase;
      margin-top: 8px;
      }
  
  
    h1, strong, em {
      
      color: orange;
      }
    article {
      border: 1px solid #ccc;
      padding: 50px;
      margin: 50px auto;
      max-width: 420px;
    }

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coding Progress</title>
  <link rel="stylesheet" href="./stylesheet.css">
</head>


<body>

  <article>
    <header>
      <h1>Coding Path</h1>
      <h2>HTML CSS</h2>

    </header>

    <p>
        Computer programming is the process of performing a particular computation, usually by 
        designing and building an executable computer program.
        Programming involves tasks such as analysis, generating algorithms, profiling algorithms' 
        accuracy and resource consumption, and the implementation of algorithms.
    </p>

    <p>
      For young learners, programming helps to gain problem-solving skills i.e. to solve a problem in a logical as well as creative way. 
      Coding also enhances thinking ability and enables one to think logically, strategically and analytically.
    </p>
    <br>
    

    <footer>
      <a href="https://www.linkedin.com/in/realmilanez">
        <img src="./images/Dubai.png" alt="Dubai, Burj Khalifa">
      </a>

      <br><br>
      <q style="font-size:13px;">Make it work, make it right, make it fast.</q>

    </footer>


  </article>




</body>


</html>