当鼠标悬停在图像上时，工具提示弹出文本？

问题描述：

链接应该是1em sans-serif字体，填充5和10像素，边距为0 0 1像素（提示：使用简写属性）;右边框应为5像素，颜色＃ff1828当鼠标悬停在图像上时，工具提示弹出文本？

b。当用户悬停在一个链接上时，右边框应该是样式双白色5像素

c。在启动时，三张意面图像中的任何一张都不应该显示文字;使用标签控制悬停时弹出的显示文本;将文本块定位为绝对值，顶边距为220像素，左边距为550像素;块的宽度至少应为180像素，这取决于您在研究中找到多少文本;使用5个像素的填充和10个像素的边距;该文本应该是黑色背景上的白色。

我一直在尝试一切，这是我到目前为止没有任何工作。我不太确定我做错了什么？如果有人能帮助我肯定会很感激。这里是我到目前为止的代码：

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

答

你的标题标签未关闭：对

而且，我看不到比

之外的其他股利或IMG类的任何引用

img.large

尝试

img.title

或

.picture.title

这将分别为img标签的img标签选择器或类别选择器。

.className指向任何给定元素的类名，其中后者引用元素的title属性。

那么试试这个，我还没有测试，所以不能肯定的结果，但希望它的帮助：的

代替：

img.title **or** .picture.title

：

div#sizes a:hover img.large

与更换

祝你好运。

（使用CSS的经验，W3Schools的作为参考的）

答

您是否尝试过使用<img src='' title='popup' />？

相对容易地实现是的，这是最简单的方法，如果你只需要一条短信，不介意浏览器提供的默认字体和背景等。 – 2014-01-03 17:39:48

答

自问这个问题已经很长时间了，但为了未来的用户使用谷歌这个问题，另一个可能的解决方案是使用Twitter的Bootstrap CSS平台。在这里看到：http://getbootstrap.com/javascript/#popovers

您需要实现的JQuery还有CSS文件，但可以通过添加两行代码（见本文件的顶部入门部分）

当鼠标悬停在图像上时，工具提示弹出文本？

相关推荐