在悬停时添加大纲

Question

我正在创建一个＆＃34;回到顶部＆＃34;我网站的按钮。当我将鼠标悬停在<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;
}

祝你好运！