今天小编跟大家讲解下有关纯CSS实现鼠标悬停提示的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS实现鼠标悬停提示的方法 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了纯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="https://www.aidi.net.cn//css/"><img src="https://www.aidi.net.cn//css/images/wall_s5.jpg"alt=""/><span>欢迎经常光临！</span></a></div></body></html>
希望本文所述对大家的div+css网页设计有所帮助。
来源：爱蒂网
