Question

我正在为一家餐馆制作网站并遇到问题。我想使用一些性感的代码，当你将鼠标悬停在它上面时，会弹出图片。一切都很好，除了我总是在“预览”下面找到未找到的小文件。图像。

我的问题是：它想要寻找什么？它在寻找什么？

这是HTML和CSS：

＆＃13;

ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 40px 0 20px;
}
ul.enlarge img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#eae9d4;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center;
color: #495a62;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
behavior: url(pie/PIE.htc);
}

＆＃13;

<div class="container specials clearfix">

  <section id="column-specials">

    <div id="lead-in">
      <h3>Unsere laufenden Angebote:</h3>
    </div>
    <!-- end lead-in -->


    <ul class="enlarge">
      <li>
        <img src="images/buffet4.jpg" alt="Unser reichlich gedecktes Buffet" />
        <span>
                                                                        <img src="images/buffet5.jpg" alt="Unser reichlich gedecktes Buffet" />
                                                                                <br />Unser reichlich gedecktes Buffet</span>
      </li>

      <li>
        <img src="images/gyros_prev2.jpg" alt="Unser leckeres Gyros Pita" />
        <span>
                                                                        <img src="images/gyros_prev.jpg" alt="Unser leckeres Gyros Pita" />
                                                                                <br />Unser frisch zubereitetes Gyros Pita</span>
      </li>
    </ul>


    <!-- test -->
    <div class="columnbuffet">
      <h4>Unser Buffet</h4>
      <p>Unser Buffet findet jeden X und Y statt. Nur 9,90 &euro; pro Person.</p>
      <img src="images/b.uffet3.jpg" alt="Unser reichlich gedecktes Buffet">
    </div>
    <!-- end columnbuffet -->

    <div class="columngyros">
      <h4>Das Gyros Pita Spezial</h4>
      <p>Beim Kauf von 2 Gyros Pita erhalten Sie ein drittes Umsonst.</p>
      <img src="images/g.yros_prev.jpg" alt="Unser leckeres Gyros Pita">
    </div>
    <!-- end columngyros -->
    <!-- end test -->

  </section>

</div>
<!-- end specials -->

＆＃13;

还指向pastebin的链接。

我确实从http://cssdemos.tupence.co.uk/image-popup.htm复制了代码并检查了它但我似乎无法找到错误。

Answer 1

假设您的网站位于http://www.example.com，并且您的服务器上有一个可以在http://www.example.com/images访问的目录，您应该只能添加/（正斜杠）在所有<img src="值之前，如下所示：

改变这个：

<img src="images/gyros_prev2.jpg" alt="Unser leckeres Gyros Pita" />

对此：

<img src="/images/gyros_prev2.jpg" alt="Unser leckeres Gyros Pita" />

这肯定不是一个有保障的解决方案，因为它很难确定问题的根源，但很大一部分时间它是一个被忽视并导致大问题的小细节。

是什么导致这个寻找另一张照片？

1 个答案: