如何使用CSS移除图片链接悬停时的多余红色下划线

红色下划线的渲染主体是包裹图片的<a>标签，不是内部的<img>元素。
你之前写的全局a:hover、a:active规则给页面所有链接都加上了下划线样式，页脚的图片链接自然也命中了这个规则。你尝试给内部img设置text-decoration: none是无效的——text-decoration是作用在a标签本身的样式，子元素无法覆盖父级的这个文本装饰属性，写在img上的这个规则根本不会生效。

把你原来写的这段样式：

footer a:hover img, 
footer a:active img {
  color           : white;
  border-color    : white;
  text-decoration : none;
}  

替换成下面的代码即可：

/* 关闭页脚图片链接的悬停/激活下划线 */
footer a:hover,
footer a:active {
  text-decoration: none;
}
/* 实现悬停时图片边框变白效果 */
footer a:hover img, 
footer a:active img {
  border-color: #fff;
}

注：原代码里给img设置的color: white属于无效属性，img是替换元素，color属性不会对图片本身产生渲染效果，可以直接删除。

• 页面内普通文本链接的原有状态样式（未访问绿色、已访问粉色、悬停红色加下划线、激活黄色加下划线）完全保留
• 页脚图片链接悬停/激活时不会出现红色下划线，仅图片边框从橙色变为白色，完全符合需求

内容的提问来源于stack exchange，提问作者realmilanez