Question

links应为1em sans-serif字体，填充为5和10像素，边距为0 0 1像素（提示：使用速记属性）;右边框应为5像素，颜色为＃ff1828

湾当用户将鼠标悬停在某个链接上时，右侧边框应为样式双倍，白色为5像素

℃。在启动时，不应在三个意大利面图像下面显示文字;使用标签控制悬停时弹出的显示文字;将文本块定位为绝对值，上边距为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>

Answer 1

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

Answer 2

自问这个问题以来已经很长时间了，但是为了将来的人们的利益谷歌搜索这个问题，另一个可能的解决方案是使用Twitter的Bootstrap CSS平台。见这里：http://getbootstrap.com/javascript/#popovers

您需要实现JQuery以及CSS文件，但通过添加2行代码可以相对轻松地实现（参见文件顶部的“入门”部分）

Answer 3

您的标题标签未关闭：p

此外，除了

之外，我看不到您对div或img类的任何引用

img.large

尝试

img.title

或

.picture.title

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

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

所以试试这个，我没有测试过，所以不能确定结果，但希望它有用：

而不是：

div#sizes a:hover img.large

替换为：

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

祝你好运。

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

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

3 个答案: