1

我仍在尝试掌握这个网络编码的窍门。上帝知道没有人知道这一切。所以，我正在寻求帮助。

我有一个包含 a 的 div <nav>，假设这个导航里面有一个<ul>with <li>......我将如何根据突出显示的 li 使图片出现在导航后面。假设我有一个垂直菜单：

主页 | 画廊 | 联系人

我希望图像可以自由扩展。假设马里奥在翻车时出现在联系人后面。我希望他的头与 Gallery 重叠，但他应该在 Contacts 后面。我确实打算将这些图像放在最左边，以免严重干扰导航。我可以用 JUST CSS 做到这一点，还是需要 jQuery。

4

1 回答 1

0

Is this what are you looking for http://jsfiddle.net/rMCMt/ ?

You can use first-child and nth-child selectors: http://jsfiddle.net/Qq9Nm/

As menu items have different widths, you have to adjust the padding and the margin individually.

The CSS code, below:

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;
}

and the 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 回答