navアイテムのためにオーバーラップする絶対的な要素を停止する

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>