纯CSS的鼠标经过文本时的悬停提示信息特效

作者：秋了秋发表时间：2014年09月17日

鼠标感应特效，把鼠标指向链接或某段文本会弹出提示，类似于网页默认的title属性，只是效果会比默认的好很多，经过了简单的美化工作，完全css实现，脱离任何js文件，一点点代码。

代码演示：

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标停留特效显示相应提示</title> <span class="wenben"><a href="//netblog.cn/">秋叶网络博客</a><span1><span2>秋叶网络博客是一个关注网络知识，网络技术+网站运营的综合型网站，其中包括博主的个人经验分享以及优秀资源下载，是一个以创新内容和创新思想为主，互动为辅，生活与情感相结合的网站。</span2></span1></span></p> <style type="text/css"> /*网页文字*/ .wenben{ position:relative; /*这个是关键*/ z-index:2; margin:200px; line-height:10em; } .wenben a{ position:relative; color:red; text-decoration:none; line-height:10em; font-size:30px; } .wenben:hover{ margin:200px; z-index:3; background:none; /*没有这个在IE中不可用*/ } /*提示框*/ .wenben span1{ display: none; } .wenben:hover span1{ display:block; position:absolute; top:1em; left:30px; width:30em; background: url("//img.netblog.site/bird.png") 20px 0 no-repeat; } .wenben:hover span2{ display:block; width:30em; line-height:2em; background:#09c; margin-top:10px; color:#fff; padding:3px; font-size:16px; } </style> <p></body> </html>

提示：可以先修改部分代码再运行

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/122.html

目录: 网页特效标签: 纯css,鼠标提示,悬停特效 17785次阅读

纯CSS的鼠标经过文本时的悬停提示信息特效

作者：秋了秋 发表时间：2014年09月17日

作者：秋了秋发表时间：2014年09月17日