文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS删除下划线？

问如何使用CSS删除下划线？
EN

Stack Overflow用户

提问于 2022-06-21 00:57:21

回答 4查看 494关注 0票数 3

<!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>

目前，我终于可以使用.css操作，但是当我将鼠标悬停在图片上时，它会在右边创建一个红色的下划线。我如何能够标记准确的图像，让程序忽略下划线，所以只有边框变成白色，而在盘旋。

下面是.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 problem is shown here<----

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2022-06-21 01:07:08

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

票数 3

Stack Overflow用户

发布于 2022-06-21 01:26:21

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

我做错了，我应该在那之后关闭</footer>，但是我在它里面添加了下面的代码，它并不仅仅因为这个而工作。

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

票数 1

Stack Overflow用户

发布于 2022-06-21 03:19:24

嘿@realmilanez，我编辑您的代码并运行浏览器，然后我修复了这个问题，您可以查看添加到样式表中的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;
  }  

  /* 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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72694290

复制

相似问题

问如何使用CSS删除下划线？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS删除下划线？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS删除下划线？
EN