0

我一直在尝试一切，但如果我不将块级元素放在内联元素中，当我将鼠标悬停在每个图像上时，我将不会出现每个图像下方的弹出文本或工具提示。我知道你不应该这样做，我必须通过 w3 验证器验证网站，这是验证时弹出的错误。有谁能够帮我？我知道它必须是一个我没有接受的简单修复。这是我的代码：

<!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 a:hover { font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px;}
#links a:hover {border-right: double 5px; background-color: #ff1828; color:white}

<span>

    .tooltip-wrap {position: relative;} 

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

    a: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> </a>
    </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></a>

    </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> </a>

    </td>


</table>
</div>



</body>
</html>
4

1 回答 1

0

您应该删除并将其<p>更改 <div> 为<span>

于 2013-03-20T03:16:03.580 回答