停止導航項目的絕對元素重疊

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>