0

さて、リンクのリストがあります。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

リスト項目にカーソルを合わせると、リスト項目の下に表示したい340x40（340は長さ）の画像があります。だから私が試したのはこれです

li:hover {
    background: url(../images/liHover.png);
}

これを行うと、画像はリスト項目の下ではなく、リスト項目の真上に表示されます。なので追加してみました

background-position: 0px 5px;
repeat: no-repeat;

これは問題を引き起こしました。アイテムの上にカーソルを置いた後に表示される画像は、340x40 の架空のコンテナーにあるかのようでした。そして、background-position を使用して 5px 下に移動するように指示したところ、画像が入っていたコンテナーを除いて画像が下に移動したかのように下に移動しませんでした。画像が仮想コンテナ内にある場合にのみ画像を見ることができ、仮想コンテナが5px下に移動しない場合、画像が移動するため、画像の5pxが消えます。私は削除しました

repeat: no-repeat;

CSSの背景位置を使用して画像を5px下に移動すると、別のバージョンの画像が表示され始めます。これで、新しい画像の下部 5px と古い画像の上部 335px を確認できます。なぜこれが起こっているのですか?どうすれば修正できますか?

4

3 に答える 3

1

OP これはあなたが探していたものですか?heightここに追加する必要があるのは、jsFiddle http://jsfiddle.net/ddcxb/1/へのリンクだけです。これがあなたが探していたものかどうか教えてください。

于 2013-10-07T01:42:32.957 に答える
1

css をリンク自体に入れるのはどうですか? お気に入り：

<ul>
    <li><a href="..."></a></li>
</ul>

a:hover {
    background: url(../images/liHover.png);
    background-repeat: no-repeat;
    background-position: fixed;
}

そして、背景位置を固定として使用してみてください..？それがうまくいくことを願っています..

于 2013-10-07T01:46:26.353 に答える