2014-09-25 100 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