鼠标悬停提示详细信息--CSS
这几天做项目,真可谓累的慌,但是收获也不少.之前做了一个关于新闻公告的列表.要求将数据库中的所有已经发布的新闻列出显示在页面中.当我从数据库中读出所有信息时,一个麻烦来了.因为我的搭档是用表格布局的.所以如果新闻标题过长,那么会自动将表格给纵向拉长.然而有的新闻题目又没有那么长,最终的结果就是整个页面有的表格一行过于高,有的又不是.整个页面极为不美观.开始想到的办法是我在后端做一个判断,当标题长度大于某个值的时候,将其截取,然后当鼠标悬停的时候,显示整个新闻公告的名字.截取字符串当然没有什么难度.可是如何做到当鼠标悬停的时候会有提示呢?我一开始希望用js中的onmouseover事件.虽然能实现,但是个人觉得比较麻烦.偶然间,我空闲时间翻阅一本关于CSS的书籍时,发现了在讲解CSS的时候,作者的一个例子让我意外兴奋.成功而且极为简单的解决了我的这个小麻烦.那就是HTML中的<abbr></abbr>标签.
在<abbr></abbr>标签中加入title属性,就能达到这一目的.下面是例子:
1 <html> 2 <head> 3 <link rel="stylesheet" type="text/css" href="one.css"> 4 </head> 5 <body> 6 <div class="news"> 7 <a href="http://www.baidu.com"><abbr title="http://www.baidu.com">我是百度</abbr></a> 8 </div> 9 </body> 10 </html>
这样当你的鼠标移动到"我是百度"四个字上面时,就会有如下的效果:
简直nice啊~!更进一步,给它添加一个CSS样式,可以让鼠标悬停在其上面的时候显示一个小问号.样式如下:
1 abbr[title]{ 2 border-bottom: 1px dotted #999; 3 } 4 5 abbr[title]:hover{cursor: help}