0

空のアンカータグに背景を配置しようとしていますが、そこにテキストを配置しないと何も表示されません。リストアイテムに画像を入れ、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;
}
4

2 に答える 2

1

アンカーリンクはデフォルトではインライン要素であるため、幅と高さを適用しても機能しません。CSSを使用して要素をブロックすることができます。

ul li a.nav1 {
 display: block;
}

詳細：http ：//www.webdesignfromscratch.com/html-css/css-block-and-inline/

于 2012-01-24T00:06:50.663 に答える
0

アンカータグをブロックレベルの要素に変更する必要がありました。すべてが機能するようになりました

  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;
}
于 2012-01-24T00:07:12.053 に答える