0

我想要做的是让三个弹出框出现在每个图像下方，当我将鼠标悬停在网页上的三个图像中的每一个上时，每个图像下都有不同的文本，但是每次我将鼠标悬停在每个图像上时，弹出文本都会停留在第三张图片右侧的同一个位置，当我将鼠标悬停在每张图片上时，没有任何文字发生变化。我不太确定我做错了什么？到目前为止，这是我的代码。

<!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>
4

1 回答 1

0

首先，您的 HTML 格式不正确。你不关闭<a>元素

其次，<span>您的 CSS 样式中有一个元素

第三，您将 div 定位在右下角。

这是我通过改变一些东西制作的小提琴

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-19T03:58:39.087 回答