删除图像链接的悬停颜色

Question

我正在使用此代码在show视图中显示图片链接：

<%= 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;}

Answer 2

这有效：

a.plain {
  &:hover {
    background: none;
  }
}