css - 删除图像链接的悬停颜色

Question

我正在使用此代码在show View 中显示图像链接:

<%= link_to( image_tag("wikipedia.org.png", {alt: "Wikipedia", size: "24x24"}), @entity.wikipedia_url, {class: "plain", :target => "_blank", :rel=>"nofollow"} ) if @entity.wikipedia_url.present?  %>

当鼠标悬停在图像链接上时，结果如下:

生成的 HTML:

<a class="plain" href="https://en.wikipedia.org/wiki/foobar" rel="nofollow" target="_blank"><img alt="Wikipedia" src="/assets/wikipedia.org.png" height="24" width="24"></a>

我想删除图片链接的悬停颜色，同时保留文本链接的悬停颜色。

因此，我补充说:

a.plain {
  &:hover {
        text-decoration: none;
  }
}

到原来的scaffold.css.scss:

a {
  color: #000;
  &:visited {
    color: #666;
  }
  &:hover {
    color: #fff;
    background-color: #000;
  }
}

这并没有移除悬停颜色。我需要更改什么？

Answer 1

这是我在 CSS 中的做法:

a {color: #000;} 
a:visited {color: #666;} 
// `!important` overwrites whatever you or who else set before for the a element.
a:hover {color: #fff!important; background-color: #000;}