css - 悬停时添加大纲

Question

我正在为我的网站创建一个“返回顶部”按钮。当我将鼠标悬停在 <a> 上时出现蓝色轮廓，我不知道如何摆脱它。我遗漏了什么？

这是它在正常状态下的样子:

悬停时:

HTML:

<p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
</p>

CSS:

#back-top {
  position: fixed;
  bottom: 30px;
  right: 100px;
}
#back-top a {
  width: 70px;
  display: block;
  text-align: center;
  font: 11px/100% Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbb;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
#back-top a:hover {
  color: #004276;
  border: none !important;
  outline: none !important;
}
#back-top a:hover span {
  background-color: #777;
  outline: none !important;
  border: none !important;
}
#back-top a span {
  width: 70px;
  height: 50px;
  display: block;
  margin-bottom: 7px;
  background: url("../images/BackToTop.png") no-repeat center center;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

Answer 1

您的问题是您在悬停时向 SPAN 添加了背景色。

因为你有一个背景图片，上面有一个边框半径，然后背景颜色显示在它下面。

要修复它，只需从您的 css 中删除以下内容:

#back-top a:hover span {
  background-color: #777;  /* REMOVE THIS LINE */
  outline: none !important;
  border: none !important;
}

祝你好运!