Question

我仍然试图抓住这个网络编码的东西。上帝知道不知道这一切。所以，我希望得到一些帮助。

我有一个包含<nav>的div，让我们说这个导航内部有<ul> <li>的内部.... 我将如何根据突出显示的li在导航后面显示图片。说我有一个垂直菜单：

主页|画廊|联系人

我希望图像可以自由扩展。让我们说马里奥出现在翻滚的后面。我希望他的头重叠画廊，但他应该落后于联系人。我确实打算将这些图像放在最左边，以免干扰导航。我可以使用JUST CSS执行此操作，还是需要jQuery。

Answer 1

这是你在找什么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>

如何在翻转时显示导航背后的div

1 个答案: