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

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

推荐答案

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

Html相关问答推荐

我似乎不能正确地将我的导航栏居中'

自动字间距以适应行CSS

CSS:显示块,第一个项目没有正确对齐

粘滞的导航栏延伸到超过页边距的右侧

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

轨道上的居中范围滑块拇指(Webkit)

如何从elementor中的滑块中获取文本?

如何制作';在第';页中搜索;是否发现多个元素中的单词?

如何使背景图像在面包屑中相互重叠

如何在黑暗模式切换中添加图标

带标签 css 的 div 内的中心图标

为什么即使我点击其他地方,我的 contenteditable="true" 也会被激活?

Angular中如何向单选按钮添加验证

如何通过像图像一样的 元素来调整 SVG 图标的大小

屏幕缩小时背景图像裁剪高度

我如何设置括号的样式,使它们不会挂在旁边的其他字符下面

CSS Padding 将右对齐的对象推离页面

为什么浏览器在 Select 一个包裹在 标签中的块级元素后包含相邻元素?

将固定/绝对伪元素放置在相对 div(具有滚动条)内,始终位于底部

粘性定位的子元素忽略父母的填充