在懸停跨度造型上顯示div

Question

標題可能有點誤導。

http://jsfiddle.net/whb8A/

我有一個span標記內一個H3元素，當然它不應該去那裏，但我似乎無法風格在我想要的方式div的，跨越式的文字。

如果將鼠標懸停在jsfiddle中的圖像上，將顯示隱藏的div，這正是我想要的樣子，但如果我將h3標記從文本中移除，我似乎無法用CSS。

我應該看看JQuery替代品嗎？如果是的話，任何指南的教程將是偉大的，謝謝

更新：感謝迄今爲止的所有幫助，但我不認爲我解釋得很好。

http://imageshack.us/photo/my-images/827/examplewc.jpg/

左邊是我怎麼想它來稱呼然而去除H3標籤和.INFO導致它被作爲風格在右側類刪除H3。這是我最擔心的邊框寬度，位置和填充

Answer 1

如果有人有興趣，我解決了這個問題。

而不是使用h3標籤和一個跨度，我刪除了兩個，而是把一個div在懸停出現的div內。你可以在下面的小提琴中看到我的意思。現在，驗證了HTML5這就是我後，感謝所有幫助

http://jsfiddle.net/whb8A/62/

Answer 2

當我放棄<h3>標記時，我看到的所有內容都是文本週圍的邊緣損失。如果您希望返回，只需將<h3>替換爲<span>，將CSS更改爲匹配該值而不是h3，然後將display: block添加到規則中。

Answer 3

你有這樣的靠近你的CSS的結尾：

.item a:hover .info { 
    display: block; 
    position: absolute; 
    bottom: 10px; 
    left: 30px; 
    width: 250px; 
    margin: 0; 
    padding: 10px; 
    background: #000; 
} 

這將選擇.item元素中徘徊a標籤內的所有.info元素，但在你的HTML你有沒有元素.item從CSS

刪除.item，一切都很好，當你刪除H3

Answer 4

肛其解決方案是將文本樣式定義直接放在<a>標籤下，以覆蓋默認錨標籤樣式。例如：

.featured a { 
    color: #fff; 
    text-transform: uppercase; 
}