首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
当前位置:
首页
>>
网页制作
纯CSS3实现鼠标悬停提示气泡效果
编辑:jimmy
日期: 2024/9/22 浏览:1 次
<!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; /* Setting the border-radius property for all Browsers */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari and Chrome */ border-radius: 5px; /* Browsers that Support it like Opera */ /* Setting the box-shadow property for all Browsers */ -moz-box-shadow: 0 0 8px gray; /* Firefox */ -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */ box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */ /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ } #bubblemenu li:hover > div { visibility:visible; opacity: 1; margin-top: -150px; /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ } </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>
提示:您可以先修改部分代码再运行
最新资源
《崩坏3》八周年了!琪亚娜等角色送上美好祝福
《小朋友齐打交》真人电影预告公开 预计明年推出
《萨顶顶-华人首位获格莱美奖提名 怜香伴》[WAV
《极致真发烧·HIFI过耳不忘 3CD》[WAV/分轨][1.
《流行HIFI摇滚音乐 摇滚在发烧 2CD》[WAV/分轨
没有才能.2024-我终于也变成人了【华研国际】【
张国荣.1995-宠爱(2014年K2HD限量版)【滚石】【
林姗.2009-个人精选集【芮河】【WAV+CUE】
魔兽世界地心之战织雾武僧用什么饰品 地心之战织
瑞鸣《喜马拉雅》[WAV+CUE]