css - 如何在翻转时显示导航后面的 div

Question

我仍在尝试掌握网络编码的窍门。上帝知道没有什么是无所不知的。所以，我希望能得到一些帮助。

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

主页 |图库 |联系人

而且我希望图像可以自由扩展。假设马里奥在翻车时出现在联系人后面。我想让他的头与图库重叠，但他应该在联系人后面。我确实打算将这些图像放在最左边，以免严重干扰导航。我可以仅使用 CSS 来完成此操作还是需要 jQuery。

Answer 1

这是你要找的吗http://jsfiddle.net/rMCMt/ ？

您可以使用 first-child 和 nth-child 选择器: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>