2014-09-25 97 views
0
<li><a class="fancypdf" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Proin eget mattis enim. Nam at laoreet sapien. Nulla facilisi. Aenean commodo egestas 
odio id bibendum. Vestibulum commodo, justo et dignissim congue, dolor sem finibus nisi, 
ac tempus risus lacus nec justo. Fusce tincidunt ante nec malesuada imperdiet." 
href="pdf/pdffile.pdf">`if hover title will appear`</a><br></li> 

這是與它的屬性標題列表,當你懸停它框出現與標題的內容,但如果標題長的很像我的例子有成爲箱我想要的寬度非常寬,只是寬度足夠大而且延伸高度。 有沒有辦法做到這一點,而不使用像this。這小提琴是所有我可以看到做這樣的CSS樣式attriibute標題框變化的寬度和高度的CSS只有

UPDATE

這是我用

a[title]:hover:after { 
    content: attr(title); 
    width:600px; 
} 
+0

引用的小提琴實際上是你的答案,除非我沒有得到你想要的東西,因爲默認的工具提示是瀏覽器功能。 – Paul 2014-09-25 07:35:11

+0

我正在尋找另一種方式是否有另一種方式,我只是想讓它像舊的只是不同的寬度和高度我試着小提琴,並改變它的寬度和高度,它沒有工作..我希望它儘可能簡單沒有其他細節只是改變寬度和高度 – Giant 2014-09-25 07:40:16

+0

同意@Paul ...什麼「沒有工作」?它很容易就像地獄一樣,只是增加一個寬度和高度,並可能刪除'white-space:nowrap;'...... – webeno 2014-09-25 07:43:43

回答

1

如果我得到它的權利,要禁用默認標題提示的CSS對於元素和製作你自己的,應該看起來非常類似於默認的。示例小提琴的問題在於,除了自定義CSS工具提示外,瀏覽器還顯示默認工具提示(帶有延遲)。

要改變這種狀況,你可以把標題屬性數據的標題屬性,並相應地改變CSS:

a[title]:hover:after { content: attr(title); ... } 

必須改變,以

a[data-title]:hover:after { content: attr(data-title); ... } 

DEMO。第一個鏈接只有自定義CSS工具提示,第二個鏈接顯示默認瀏覽器工具提示。

+0

我看到有什麼與數據標題和標題的區別我希望不會有任何缺點,因爲這是我的意思,所以我現在可以改變寬度和盒子的高度。 – Giant 2014-09-25 07:59:50

+0

一個缺點是屏幕閱讀器不會讀出標題屬性(因爲沒有)。除此之外,我現在無法想到其他任何東西。 「數據-?」屬性是有效的,請參閱http://www.w3schools.com/tags/att_global_data.asp – Paul 2014-09-25 08:04:14

+0

爲什麼它被鎖定在ul下面我希望它在你旁邊的李可以給我建議來解決它 – Giant 2014-09-25 08:04:59