停止导航项目的绝对元素重叠

Question

好的，所以即时通讯设法创建一个基于图像的导航栏，当每个图像被徘徊时，它会随着转换而改变。

我跟着本教程：http://css3.bradshawenterprises.com/cfimg/ 和过渡的作品，但现在我所有的图像重叠海誓山盟。

完全卡在这里。

nav { 
 
    width: 1000px; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    top: -16px; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 
nav img { 
 
    position: absolute; 
 
    -webkit-transition: opacity 0.3s ease-in-out; 
 
    -moz-transition: opacity 0.3s ease-in-out; 
 
    -o-transition: opacity 0.3s ease-in-out; 
 
    transition: opacity 0.3s ease-in-out; 
 
} 
 
nav img.top:hover { 
 
    opacity: 0; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="forums"> 
 
     <img class="bottom" src="inc/img/nav/communityhover.png" /> 
 
     <img class="top" src="inc/img/nav/community.png" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="store"> 
 
     <img class="bottom" src="inc/img/nav/store.png"> 
 
     <img class="top" src="inc/img/nav/store.png"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="hiscores"> 
 
     <img class="bottom" src="inc/img/nav/hiscores.png"> 
 
     <img class="top" src="inc/img/nav/hiscores.png"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="updates"> 
 
     <img class="bottom" src="inc/img/nav/updates.png"> 
 
     <img class="top" src="inc/img/nav/updates.png"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="support"> 
 
     <img class="bottom" src="inc/img/nav/support.png"> 
 
     <img class="top" src="inc/img/nav/support.png"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="vote"> 
 
     <img class="bottom" src="inc/img/nav/vote.png"> 
 
     <img class="top" src="inc/img/nav/vote.png"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img class="bottom" src="inc/img/nav/home.png"> 
 
     <img class="top" src="inc/img/nav/home.png"> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

您所遇到的问题是，li的大小不是大小的图片一样。所以请确保width和height与您使用的图像相同。

nav li { 
 
    width: 350px; 
 
    height: 150px; 
 
} 
 
nav ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 
nav img { 
 
    position: absolute; 
 
    -webkit-transition: opacity 0.3s ease-in-out; 
 
    -moz-transition: opacity 0.3s ease-in-out; 
 
    -o-transition: opacity 0.3s ease-in-out; 
 
    transition: opacity 0.3s ease-in-out; 
 
} 
 
nav img.top:hover { 
 
    opacity: 0; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#"> 
 
     <img class="bottom" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=a1&w=350&h=150" /> 
 
     <img class="top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=a2&w=350&h=150" /> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img class="bottom" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=b1&w=350&h=150"> 
 
     <img class="top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=b2&w=350&h=150"> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img class="bottom" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=c1&w=350&h=150"> 
 
     <img class="top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=c2&w=350&h=150"> 
 
     </a> 
 
    </li> 
 

 
    </ul> 
 
</nav>