Html 工具提示?我需要弹出文本显示在每个图像下
我想做的是,当我将鼠标悬停在网页上的三幅图像上时,在每幅图像下都会出现三个弹出框,每个框中都有不同的文本,但每次我将鼠标悬停在每幅图像上时,弹出框文本都会停留在第三幅图像右侧的同一位置,当我将鼠标悬停在每幅图像上时,文本都不会改变。我不太确定我做错了什么?这是到目前为止我的代码Html 工具提示?我需要弹出文本显示在每个图像下,html,tooltip,Html,Tooltip,我想做的是,当我将鼠标悬停在网页上的三幅图像上时,在每幅图像下都会出现三个弹出框,每个框中都有不同的文本,但每次我将鼠标悬停在每幅图像上时,弹出框文本都会停留在第三幅图像右侧的同一位置,当我将鼠标悬停在每幅图像上时,文本都不会改变。我不太确定我做错了什么?这是到目前为止我的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
<!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>
实验7-3
将鼠标悬停在照片上,阅读有关意大利面及其营养信息。
成分包括:浓缩硬粒面粉、鸡蛋、水、大豆卵磷脂。营养事实:大约200卡路里,3.2%的总脂肪,12.5%的胆固醇,16.7%的蛋白质,1.7%的钙和8.3%的铁
配料包括:碎牛肉、奶酪、浓缩意大利面和番茄酱。营养成分:每份约377卡路里,13%纤维,约50%蛋白质,约35%钠
成分包括:水、硬粒小麦粗面粉、牛肉、小麦粉、鸡蛋、植物油、盐、洋葱调味品、西红柿、糖、玉米粉、草药提取物、盐、大蒜盐、香料提取物、黑胡椒。营养成分:2.6克蛋白质、1.6克脂肪、0.8克纤维和0.3克钠
首先,您的HTML格式不正确。
你不能通过改变一些东西来关闭我制作的
HTML
非常感谢你!这真的对我很有帮助。@user2129596如果这个答案对你有帮助,请礼貌地投票或将其标记为答案。:)
<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>
#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;
}