ホバー状態の画像ボタン

Question

画像ボタンの作成に問題があり、正しく表示されません。

HTML

<div class="icon"> 
    <a role="button"></a> 
</div> 

CSS

.icon{ 
background: url('assets/icon.png') 
} 
.icon:hover{ 
background: url('assets/icon-hover.png') 
} 

これを行うには良い方法はありますか？

Answer 1

あなたの問題はコンテンツを持たないdivに関連していると思います。あなたがボタンとしてdiv要素を使うべきではないicon.pngの

.icon { 
    width: 50px; 
    height: 50px; 
} 

Answer 2

の寸法に一致するdiv要素に幅と高さを追加してみてください（これはクリック可能ではありません）、単一<a>で十分です。

<a href='#' class="btn">Button</a> 

あなたの目標に応じて、あなたが見るものを使用するときのために<button> を使用することがあります：https://css-tricks.com/use-button-element/

テキストなしでリンクを持っているので、それがバックグラウンドとしては何も表示されません。デフォルトでは<a>がインラインであるため、幅と高さを設定してディスプレイをインラインブロックに変更する必要があることを@PatrickKellyが述べたとおりです。テキストなしで、画像へのリンク/ボタンを持つ

.btn { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
} 

は、アクセシビリティ（スクリーンリーダー）のために悪いです。ここをクリックしてください13：https://www.sitepoint.com/15-rules-making-accessible-links/