今天小编跟大家讲解下有关纯CSS3实现鼠标悬停提示气泡效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS3实现鼠标悬停提示气泡效果 的相关资料，希望小伙伴们看了有所帮助。
<!DOCTYPE HTML><html> <head> <title>CSS3制作鼠标悬停提示气泡内容菜单</title> <style type="text/css"> body{ background:#D6D3C9; color:#383835; font-family:Arial, Arial, Helvetica, sans-serif; } #bubblemenu li { display: inline; margin-left: 15px; cursor:pointer; } #bubblemenu li > div { width: 150px; min-height: 100px; position: absolute; display: inline; margin-left: -120px; padding: 5px; visibility:hidden; opacity: 0; margin-top: -125px; background: #ffffff; font-size:1em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 8px gray; -webkit-box-shadow: 0 0 8px gray; filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); box-shadow: 0 0 8px gray; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #bubblemenu li:hover > div { visibility:visible; opacity: 1; margin-top: -150px; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> </head> <body> <h1>Coda Effect With CSS3</h1> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <ul id="bubblemenu"> <li> Penn Jillett <div> My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them. </div> </li> <li> Thomas Watson <div> I think there is a world market for maybe five computers. </div> </li> <li> Bill Gates <div> 640K ought to be enough for anybody. </div> </li> <li> Sam Ewing <div> Computers are like bikinis. They save people a lot of guesswork. </div> </li> </ul><div style="color:#000;width:600px;margin:0 auto; text-align:center; font-size:12px;"></div></body></html></td> </tr> </table> 提示：您可以先修改部分代码再运行来源：爱蒂网
