當鼠標懸停在圖像上時，工具提示彈出文本？

鏈接應該是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>

來源

2013-03-17 user2129596

你的標題標籤未關閉：對

而且，我看不到比

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

img.large

嘗試

img.title

或

.picture.title

這將分別爲img標籤的img標籤選擇器或類別選擇器。

.className指向任何給定元素的類名，其中後者引用元素的title屬性。

那麼試試這個，我還沒有測試，所以不能肯定的結果，但希望它的幫助：的

代替：

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

：

div#sizes a:hover img.large

與更換

祝你好運。

（使用CSS的經驗，W3Schools的作爲參考的）

來源

2013-03-17 23:04:11 Timmy

您是否嘗試過使用<img src='' title='popup' />？

來源

2013-07-20 10:45:05 kurdtpage

相對容易地實現是的，這是最簡單的方法，如果你只需要一條短信，不介意瀏覽器提供的默認字體和背景等。 – 2014-01-03 17:39:48

自問這個問題已經很長時間了，但爲了未來的用戶使用谷歌這個問題，另一個可能的解決方案是使用Twitter的Bootstrap CSS平臺。在這裏看到：http://getbootstrap.com/javascript/#popovers

您需要實現的JQuery還有CSS文件，但可以通過添加兩行代碼（見本文件的頂部入門部分）

來源

2015-06-25 09:17:38 kurdtpage

當鼠標懸停在圖像上時，工具提示彈出文本？

回答

相關問題