html - 停止绝对元素与导航项重叠

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>