1

私はまだこの Web コーディングのコツをつかもうとしています。主はそれをすべて知っているわけではないことを知っています。だから、私は助けを求めて手を差し伸べています。

を含む div があり、この nav の内部にwith<nav>があるとしましょう..強調表示された li に基づいて、ナビゲーションの背後に画像を表示するにはどうすればよいでしょうか。垂直メニューがあるとします。<ul><li>

ホーム | ギャラリー | 連絡先

イメージを自由に広げたい。マリオがロールオーバー時に連絡先の後ろに表示されるとしましょう。彼の頭をギャラリーに重ねたいのですが、連絡先の後ろにある必要があります。ナビゲーションをひどく妨げないように、これらの画像を左端に配置するつもりです。これを JUST CSS で行うことはできますか、それとも jQuery が必要ですか。

4

1 に答える 1

0

これはあなたが探しているものですかhttp://jsfiddle.net/rMCMt/ ?

最初の子セレクターと n 番目の子セレクターを使用できます: http://jsfiddle.net/Qq9Nm/

メニュー項目の幅が異なるため、パディングとマージンを個別に調整する必要があります。

以下のCSSコード：

li
{
    box-shadow: 4px 4px 2px grey;
    margin: 10px;
    list-style-type: none;
    float: left;
}
li:first-child:hover,
li:nth-child(2):hover,
li:nth-child(3):hover,
li:nth-child(4):hover,
li:nth-child(5):hover
{
    background-size: 200px 200px;
    background-repeat: no-repeat;
    padding-bottom: 180px;
    margin-bottom: -170px;
}
li:first-child:hover
{
    background-image: url('http://goo.gl/RqQtl');
    padding-right: 145px;
    margin-right: -135px;
}
li:nth-child(2):hover
{
    background-image: url('http://goo.gl/TWI0t');
    padding-right: 130px;
    margin-right: -120px;
}
li:nth-child(3):hover
{
    background-image: url('http://goo.gl/xRPiq');
    padding-right: 115px;
    margin-right: -105px;
}
li:nth-child(4):hover
{
    background-image: url('http://goo.gl/u3Akz');
    padding-right: 140px;
    margin-right: -130px;
}
li:nth-child(5):hover
{
    background-image: url('http://goo.gl/Em9Ij');
    padding-right: 140px;
    margin-right: -130px;
}

そしてhtml：

<nav>
   <ul>
      <li> HOME </li>
      <li> GALLERY </li>
      <li> CONTACTS </li>
      <li> EXTRA1 </li>
      <li> EXTRA2 </li>
   </ul>
</nav>
于 2013-06-22T06:14:27.417 に答える