私はリスト内の画像とcssでホバー上で変化するアンカータグを持っています

Question

空のアンカータグに背景を置こうとしていますが、そこにテキストを置かない限り何も表示されません。リスト項目にイメージを置いて、cssでホバー上の別のイメージに変更するのに最適な方法は何ですか？

HTML

<ul> 
    <li><a class="nav1" href="http://localhost:8888/fiftyfity/?page_id=2"></a></li> 
</ul> 

CSSは

ul li a.nav1{ 
    background-image: url("../images/nav1.gif"); 
    width:161px; 
    height: 49px; 
} 
ul li a.nav1:hover{ 
    background-image: url("../images/navB1.gif"); 
    width:100px; 
    height: 20px; 
} 

Answer 1

アンカーリンクは、デフォルトでは、インライン要素であり、その幅と高さを適用することは動作しません。あなたは彼らがCSSで要素をブロックすることができます：

ul li a.nav1 { 
display: block; 
} 

さらに詳しい情報：http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Answer 2

私はブロックレベル要素にアンカータグを変更する必要がありました。これですべて動作します

ul li a.nav1{ 
    display:block; 
    background-image: url("../images/nav1.gif"); 
    width:161px; 
    height: 49px; 
} 
ul li a.nav1:hover{ 
    display:block; 
    background-image: url("../images/navB1.gif"); 
    width:100px; 
    height: 20px; 
}