工具提示？我需要彈出文字出現在每張圖片下

我想要做的是在每張圖片下出現三個彈出框，每張圖片上顯示不同的文字，當我將鼠標懸停在網頁上的三張圖片上時，當我將鼠標懸停在每張圖片上時，彈出的文本會保留在第三張圖片右側的相同位置，並且當我將鼠標懸停在每張圖片上時，文本都不會更改。我不太確定我做錯了什麼？這是我的代碼到目前爲止。工具提示？我需要彈出文字出現在每張圖片下

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Lab 7-3</title> 

<style type="text/css"> 
<!-- 

#links;demo {font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px color: #ff1828} 

div.links:hover {border-right: double 5px; color:white} 

<span> 
.tooltip-wrap {position: relative;} 
.tooltip-wrap .tooltip-content { 
    display: none; 
    position: absolute; 
    top: 220px; 
    left: 550px; 
    width: 180px; 
    background-color: #000000; 
    color:#ffffff; 
    padding: 5px; 
    margin: 10px;} 
.tooltip-wrap:hover .tooltip-content {display: block;} 
</span> 

--> 
</style>  

</head> 

<body> 

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /> 
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> 

<div id="links"> 
<div class="tooltip-wrap"> 

<table style="text-align: center"> 
    <tr> 

    <td> 
     <a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine" /> 
     <div class="tooltip-content"> <p>Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron</p> 
     </div> 
    </td> 

    <td> 
     <a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" /> 
     <div class="tooltip-content"> <p>Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium</p> 
     </div> 
    </td> 

    <td> 
     <a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" /> 
     <div class="tooltip-content"> <p>Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium</p> 
     </div> 


    </td> 
</table> 
</div> 

</body> 
</html>

來源

2013-03-19 user2129596

首先，您的HTML格式不正確。您不關閉<a>元素

所有第二，你在你的CSS樣式所有的

三有<span>元素，你在右下角定位格。

這裏有一個fiddle我做了改變一些東西，周圍

HTML

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /> 
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> 
<div id="links"> 
    <div class="tooltip-wrap"> 
     <table style="text-align: center"> 
      <tr> 
       <td> 
        <a> 
         <img class="picture" src="http://fakeimg.pl/250x100/" width="250" height="100" alt="Fettucine" /> 


         <div class="tooltip-content"> 
          <p>Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron</p> 
         </div></a> 
       </td> 
       <td> <a><img class="picture" src="http://fakeimg.pl/250x100/" width="250" height="100" alt="Lasagna" /> 
     <div class="tooltip-content"> <p>Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium</p> 
      </div></a> 

       </td> 
       <td> <a><img class="picture" src="http://fakeimg.pl/250x100/" width="250" height="100" alt="Ravioli" /> 
     <div class="tooltip-content"> <p>Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium</p> 
     </div></a> 

       </td> 
     </table> 
    </div>

CSS

#links; 
demo { 
    font: 1 em sans-serif; 
    padding: 5px 10px; 
    margin: 0px 0px 1px, border-right: 5px color: #ff1828 
} 
div.links:hover { 
    border-right: double 5px; 
    color:white 
} 

.tooltip-wrap { 
    position: relative; 
} 
.tooltip-wrap .tooltip-content { 
    display: none; 
    position: absolute; 
    top: 0; 
    top: 100px; 
    width: 180px; 
    background-color: #000000; 
    color:#ffffff; 
    padding: 5px; 
    margin: 10px; 
} 
a:hover .tooltip-content { 
    display: block; 
}

來源

2013-03-19 03:58:39

太謝謝你了！這真的幫助我。 – user2129596 2013-03-19 04:41:28

@ user2129596如果這個答案對你有幫助，那麼可以點擊或標記爲答案。 :) – 2013-03-19 15:29:36

工具提示？我需要彈出文字出現在每張圖片下

回答

相關問題