2

ホバー時にナビゲーション メニューを非表示にし、マウスがあるメニューの背後に背景画像を表示するものがあるかどうか疑問に思っていました。

次のようなシンプルなナビゲーション メニューがあります。

    <ul id="nav" class="group">
    <li><a href="#" id="nav-portfolio">portfolio</a></li>
    <li><a href="#" id="nav-blog">blog</a></li>
    <li><a href="#" id="nav-me">me</a></li>
    <li><a href="#" id="nav-contact">contact</a></li>
    </ul>

そのための CSS は次のとおりです。

#nav {
    float: right;
    margin: 0.9em 1.5em 1em 0.9em;
    padding-right: 2em;

}

#nav li {

    float: left;
    padding: 0 0 0 .9em;
}
4

3 に答える 3

2

はい、これに使用できます:hover：

#nav li:hover {
    background: url("image.png") center center no-repeat;
}
于 2012-10-14T05:50:09.697 に答える
0

画像が既にメニューの背後にある場合は、メニューまたはアクティブなオプションを非表示にするだけです。

あなたのコードには画像はありませんが、いずれにせよ、このようなコードでうまくいくはずです。 

#nav li:hover a { color:transparent; }
#nav li:hover { background: url("image.jpg"); }

さよなら

于 2012-10-14T06:18:33.673 に答える
0

たとえば、シングルコットなしでURLを使用し、絶対アドレスを使用します

#nav li:hover { background: url(/yourRootAddress/YourFileOrFolderImage/image.jpg); }
于 2012-10-14T06:47:21.383 に答える