Html 将鼠标悬停在图像上时，工具提示会弹出文本吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15467250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tool tip pop up text when hovering over an image?
提问by user2129596
links should be 1em sans-serif font with padding of 5 and 10 pixels and margins of 0 0 1 pixels (hint: use shorthand properties); the right border should be 5 pixels and color #ff1828
链接应该是 1em sans-serif 字体，填充为 5 和 10 像素，边距为 0 0 1 像素（提示：使用速记属性）；右边框应该是 5 像素和颜色 #ff1828
b. when user hovers over a link, the right border should be style double with 5 pixels in white
湾 当用户将鼠标悬停在链接上时，右边框应为双倍样式，白色 5 个像素
c. At start-up, there should be no display of text beneath any of the three images of pasta; use the tags to control the display text pop-up upon the hovering; position the block of text as absolute with a top margin of 220 pixels and left margin of 550 pixels; the width of the block should be 180 pixels at a minimum, depending on how much text you find in your research; use padding of 5 pixels and margins of 10 pixels; the text should be white on a black background.
C。启动时，在意大利面的三个图像中的任何一个下方都不应显示文本；使用标签控制悬停时的显示文本弹出；将文本块定位为绝对，上边距为 220 像素，左边距为 550 像素；块的宽度至少应为 180 像素，具体取决于您在研究中找到的文本数量；使用 5 个像素的填充和 10 个像素的边距；文本应该是黑色背景上的白色。
I have been trying everything and this is what I have so far and nothing is working. I'm not quite sure what I'm doing wrong? If anybody could help I would surely appreciate it. here is my code so far:
我一直在尝试一切，这就是我迄今为止所做的，但没有任何效果。我不太确定我做错了什么？如果有人可以提供帮助，我肯定会很感激。到目前为止，这是我的代码：
<!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 {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>
div#sizes a:hover img.large {position: absolute; top: 220px; left: 550px;
width: 180px; border:none; padding: 5px; margin: 10px
background-color: #000000; color: #ffffff}
</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" "demo">
<table style="text-align: center">
<tr>
<td>
<a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine" title="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"/>
</td>
<td>
<a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" title=" 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" />
</td>
<td>
<a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" title=" 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" />
</td>
</td>
</table>
</div>
</body>
</html>
回答by kurdtpage
Have you tried using <img src='' title='popup' />?
你试过使用<img src='' title='popup' />吗？
回答by kurdtpage
It's been a long time since this question was asked, but for the benefit of people in the future Googling this question, another possible solution would be to use Twitter's Bootstrap CSS platform. See here: http://getbootstrap.com/javascript/#popovers
自从提出这个问题已经很长时间了，但为了将来人们在谷歌上搜索这个问题，另一种可能的解决方案是使用 Twitter 的 Bootstrap CSS 平台。请参阅此处：http: //getbootstrap.com/javascript/#popovers
You would need to implement JQuery as well as the CSS files, but that can be achieved relatively easily by adding 2 lines of code (see the Getting Started section at the top of the file)
您需要实现 JQuery 和 CSS 文件，但可以通过添加 2 行代码相对轻松地实现（请参阅文件顶部的入门部分）
回答by PsychoMantis
Your title tag isn't closed :p
您的标题标签未关闭：p
Also, I can't see any reference to your to your div or img classes other than the
另外，除了
img.large
Try
尝试
img.title
or
或者
.picture.title
which will be your img tag selector or class selector for the img tag respectively.
这将分别是 img 标签的 img 标签选择器或 img 标签的类选择器。
.className refers to the class name to any given element where the latter refers to the title attribute of the element.
.className 指的是任何给定元素的类名，其中后者指的是元素的标题属性。
So try this, and I haven't tested this so can't be sure of the outcome but hopefully its helpful:
所以试试这个，我还没有测试过这个，所以不能确定结果，但希望它有帮助：
instead of:
代替：
div#sizes a:hover img.large
replace with:
用。。。来代替：
img.title **or** .picture.title
Best of luck.
祝你好运。
(Use of CSS as experience, w3schools as ref)
（使用 CSS 作为经验，w3schools 作为参考）
