浏览 2087 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2016-11-01
本文，兄弟连HTML5培训，分享了纯CSS实现鼠标悬停提示的方法。给大家供大家参考。具体分析如下： 这是一款比较漂亮的鼠标悬停提示效果，用纯CSS代码实现，鼠标放到图片上会显示一个层，也就是悬停时的提示，在这个提示框内你还可以加入图片或是一个列表，这就靠你的发挥了，提示框的背景颜色和文字颜色你都可以自己调。 代码如下: <!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> <style> * { margin:0; padding:0; } div { margin:130px; list-style:none; } div img { border:0; } div a { color:#fff; text-decoration:none; position:relative; display:block; } div span { font-size:12px; display:none; } div a:hover { background:; } div a:hover span { padding:3px; background:skyblue; color:#fff; font-size:9pt; border-width:1px 2px 2px 1px; border-color:#333; border-style:solid; position:absolute; top:-30px; left:0; display:block; } </style> </head> <body> <div> <a href=""> <img src="images/wall_s5.jpg" alt="" /> <span>欢迎经常光临！</span> </a> </div> </body> </html> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
