Question

我对谷歌浏览器中的图片链接存在一些困难。当它们被盘旋时，图像会变成黑色下划线，如何移除这个我尝试过的

a {
   color: #000;
   &:visited {
      color: #666;
   }
   &:hover {
      outline-style:none;
      box-shadow:none;
      border-color:transparent;
   }
}

和

a {
   color: #000;
   &:visited {
      color: #666;
   }
   &:hover {
      border-style:none;
   }
}

除了大量其他东西，但似乎没有任何作用，css确实影响了它，但不是我想要的，任何帮助都会非常感激。

Answer 1

下划线来自text-decoration声明，而不是border-style声明。您想要正确设置：

a {
  color: #000;

  &:hover {
    text-decoration: none;
  }
}

这是反直觉的，因为您的链接恰好是一个图像，但声明的目标是包裹图像的锚标记。

Answer 2

我还发现，在生成脚手架时，在rails中创建了assets / stylesheets / scaffold.css.sass。这实际上是我问题的根源。这里创建了一些默认的css，它在chrome中添加了黑色下划线，通过删除它我可以在悬停时删除我的图像链接上的黑色下划线。这个默认的css可能与你编写的其他样式冲突，所以它的想法是检查是否存在样式冲突。

在悬停时删除黑色下划线以获取图像链接

2 个答案: