html - 导航悬停时背景图像发生变化

Question

我正在尝试按照本教程学习 Web 开发类(class)。这个想法是在悬停在导航链接上时让不同的背景图像轻松进入容器。背景图像像预期的那样缓和，但是静态背景图像没有出现。我花了几个小时研究代码，看看我做了什么不同的事情，但我找不到问题。

Here is the tutorial I am following

这是我的 CSS:

     * {
            margin: 0; padding: 0;
        }
        nav {
            width: 170px; height: 500px;
            background-color:  #ffffff;
            border: #000000 3px;
        }
        .wrapper {
            position: relative;
            overflow: hidden;
            margin: 100px auto;
            width: 800px;
            height: 500px;/*CHECK*/
            box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
        }
        .wrapper img {
            position: absolute;
            top: 0; left: 0;
            z-index: -60;/*makes nav images come in on top of static background image*/
        }    
        .wrapper li img {
            position: absolute;
            top: 0; left: 800px;
            z-index: -50;/*makes static background stay behind nav images*/
            transition: all 3s ease; /*experiment*/
        }
        ul {
            width:800px; height: 500px;
            list-style: none;
        }
        li a {
          z-index: 1;
          display: block;
          padding-left: 20px;
          width: 150px;
          height: 30px;
          background: white;
          color: #444;
          text-decoration: none;
          font: 14px/30px Helvetica, Verdana, sans-serif;
        }
        li:nth-child(1) {
          padding-top: 50px;
        }
        
        li a:hover {
          background: #eee;
        }
        
        li a:hover + img {
          left: 0px;
        }
        body {
            background-color: #ffffff;
        }

<div class="wrapper"><!--DIV SEPARATES NAV SECTION-->
            <nav>
            <h1>PAGE TITLE</h1>        
                <ul>
                    <li>
                      <a href="index.html">Home</a>
                      <img src="images/nav/fit/home.jpg" alt="">
                    </li>
                    <li>
                      <a href="afghan.html">Afghanistan</a>
                      <img src="images/nav/fit/afghan.jpg" alt="">
                    </li>
                    <li>
                      <a href="libya.html">Libya</a>
                      <img src="images/nav/fit/libya.jpg" alt="">
                    </li>
                    <li>
                      <a href="oki.html">Okinawa</a>
                      <img src="images/nav/fit/oki.jpg" alt="">
                    </li>
                    <li>
                      <a href="korea.html">Korea</a>
                      <img src="images/nav/fit/korea.jpg" alt="">
                    </li>
                </ul>
        </nav>    
        <img src="image/nav/fit/home.jpg" alt=""><!--STATIC BACKGROUND IMAGE-->
        </div>

如有任何帮助或建议，我们将不胜感激。非常感谢

Answer 1

您的代码处于正确的轨道上。 问题出现在您的图像路径上。检查以下 fiddle ，我将您的图像路径替换为 designshack 图像。检查以下link了解更多文件路径。

<img src="picture.jpg"> picture.jpg is located in the same folder as the current page

<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder

<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web

<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder

     * {
            margin: 0; padding: 0;
        }
        nav {
            width: 170px; height: 500px;
            background-color:  #ffffff;
            border: #000000 3px;
        }
        .wrapper {
            position: relative;
            overflow: hidden;
            margin: 100px auto;
            width: 800px;
            height: 500px;/*CHECK*/
            box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
        }
        .wrapper img {
            position: absolute;
            top: 0; left: 0;
            z-index: -60;/*makes nav images come in on top of static background image*/
        }    
        .wrapper li img {
            position: absolute;
            top: 0; left: 800px;
            z-index: -50;/*makes static background stay behind nav images*/
            transition: all 3s ease; /*experiment*/
        }
        ul {
            width:800px; height: 500px;
            list-style: none;
        }
        li a {
          z-index: 1;
          display: block;
          padding-left: 20px;
          width: 150px;
          height: 30px;
          background: white;
          color: #444;
          text-decoration: none;
          font: 14px/30px Helvetica, Verdana, sans-serif;
        }
        li:nth-child(1) {
          padding-top: 50px;
        }
        
        li a:hover {
          background: #eee;
        }
        
        li a:hover + img {
          left: 0px;
        }
        body {
            background-color: #ffffff;
        }

<div class="wrapper"><!--DIV SEPARATES NAV SECTION-->
            <nav>
            <h1>PAGE TITLE</h1>        
                <ul>
                    <li>
                      <a href="index.html">Home</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic1.jpg" alt="">
                    </li>
                    <li>
                      <a href="afghan.html">Afghanistan</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic2.jpg" alt="">
                    </li>
                    <li>
                      <a href="libya.html">Libya</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic3.jpg" alt="">
                    </li>
                    <li>
                      <a href="oki.html">Okinawa</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic4.jpg" alt="">
                    </li>
                    <li>
                      <a href="korea.html">Korea</a>
                      <img src="https://designshack.net/tutorialexamples/navpics/pic5.jpg" alt="">
                    </li>
                </ul>
        </nav>    
        <img src="https://designshack.net/tutorialexamples/navpics/pic1.jpg" alt=""><!--STATIC BACKGROUND IMAGE-->
        </div>