3

私は CSS を使用しており、ロールオーバーをトリガーするために js を使用せずにナビゲーション メニューを構築しようとしています。このナビゲーションは、デザインに仕​​切りのような矢印があり、個々のリンクの背景に分割するのが面倒なので、ちょっと注意が必要です...

なんらかの理由で、私は今これを理解することができず、そこに質問を出すと思っていました...疑似クラス :hover を使用して、各リンクで UL の背景を交換することは可能ですか?

私はすべてのフィドルを作成しました。http://jsfiddle.net/kenaesthetic/dkEAr/

body{
    background-color:#efefef;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#content{
    background-color:white;
    margin: 28px auto;
    padding:33px;
    width:894px;
    border-radius:8px;
    box-shadow:1px 1px 5px #ddd;
    height:600px;
}

ul#nav{
    width:100%;
    height:48px;
    background-image:url(http://www.mniac.com/mniac-assets/images/nav-sprite.png);
}

ul#nav li{
    float:left;
}

ul#nav li a{
    display:block;
    color:#6f6f70;
    text-transform:uppercase;
    text-decoration:none;
    padding:17px 0 16px 0;
    text-align:center;
    font-size:15px;
}

ul#nav li a:hover{
    color:#fff;
}

ul#nav li a.home{
    width:56px;
    text-indent:-9999px;
}

ul#nav li a.home:hover{

}

ul#nav li a.background{
    width:210px;
}

ul#nav li a.process{
    width:214px;
}
ul#nav li a.impliment{
    width:214px;
}

ul#nav li a.reference{
    width:200px;
}

これがCSSです。

試してみたい人はいますか？これはできますか？頭が痛い ：）

皆さんありがとう。

アップデート：

ここに私の解決策があります（注：IE8で作業する必要がありました）

絶対配置と新しいスプライトを使用しました。

http://jsfiddle.net/kenaesthetic/rA59L/2/

最後のリンクが機能していません...ここではローカルで正常に機能するため、理由はわかりません。もうこれをいじる時間はありません。

助けてくれてありがとう

4

3 に答える 3

1

ええ、それは可能です。多くの疑似クラスを使用し::afterて、最後のliアイテムから背景を配置します。

しかし、より良い方法は、その背景の一部を各リスト項目に適用することです。そうすれば、それをオンにすることができますli:hover

わかりました、私はそれを助けることができず、グラデーションと変換を使用して、画像なしで作成しました:)

于 2013-02-07T21:47:46.260 に答える
0 
ul#nav li.home:hover{
    background-image:url('newBackgroundimage.png');
}

それほど具体的にする必要はありませんが：

li.home:hover{
     background-image:url('newBackgroundimage.png');
}
li.background:hover{
     background-image:url('newBackgroundimage.png');
}
li.process:hover{
     background-image:url('newBackgroundimage.png');
}

等々...

于 2013-02-07T21:48:25.293 に答える
0

li親に影響を与えるホバーされた子要素を持つことは難しい場合があるため、それを行う1つの方法は、背景画像をulの代わりにsに切り替えることです。

この例のようなものは機能する可能性がありますが、 Backgroundホバーの動作を示すのに十分なだけ構築されています。

http://jsfiddle.net/PzHT9/

于 2013-02-07T22:08:06.457 に答える