css - 画像リンクホバーの下線を無効にする

Question

Railsアプリで半透明の画像をリンクにしたところ

<%= link_to image_tag("cow.png"), cows_path %>

ただし、実際の画像は透明であるため完全な長方形にはなりません。マウスで画像にカーソルを合わせると、画像の下に画像の長方形の幅で、両側から突き出た黒いバーが作成されます。画像の不透明な部分。

問題は、このホバー動作を停止させる方法です。

透明な画像は牛の画像で、黒いバーに問題があります。日焼けしたものはページの背景であり、画像ではありません。

何か案は？これを修正するためのCSSコマンドがわかりません。

編集：フィドル。ごめん。私のコンピューターから少し離れていました。私はいくつかの提案を含めましたが、それらは物事を修正していないようです。私も間違っているかもしれません。これはcss.scssスタイルシートです。

Answer 1

私のために働いたのは、これを.animal-buttonsクラスに入れることでした。

a {
background: none;
}

Answer 2

生成されたHTMLを提供しない限り、thisngsを想定する必要があります。これを使用してください：

a:hover {text-decoration: none;}
a img {border: 0;}

Answer 3

実際のHTMLがないため、暗闇で撮影されますが、次のCSSルールを試すことができます。

img {border:0;}
a:hover {text-decoration: none;}

Answer 4

:focus {outline:0;}

a:hover {text-decoration:none; outline:0;}

img, img:hover {border:0; outline:0;}