零古网
您的百科小助手
首页
教程
游戏
电脑
历史
首页
教程
正文
纯CSS3实现鼠标悬停提示气泡效果
教程
2023-11-04 09:58:45
<!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></div></body></html></td> </tr> </table>
提示:您可以先修改部分代码再运行
table中的超长字符串用省略号表示的css样式
« 上一篇
你应该知道的30个css选择器
下一篇 »
推荐文章
tp link无线路由器无法登录192.168.1.1怎么办?(tp link无线路由器无法登录192.168.1.1怎么办?)
巧妙插入图片,让WPS演示文字背后更精彩
wps格式刷怎么连续用?
wps word表格线条粗细怎么设置 wps Word设置表格线条粗细的方法
泰拉瑞亚电脑版怎么下载?
阅读排行
阿里视频网址是什么 TBO视频网站上线时间
2023-10-24
电脑通过IIS访问svc出错无法提供网页怎么解决?
2023-10-24
WPS PPT文本框输入文字如何自动换行 WPS PPT文本框输入文字自动换行的设置方法
2023-10-20
y480怎么u盘重装系统 y480装win7
2023-11-27
WPS中Excel怎么计算数据的算术平方根
2023-11-24
怎么删除无用的注册表 怎么删除不用的注册表
2023-12-02
剪映怎么单独导出音频 电脑版剪映导出音频的方法
2023-10-14
为什么输入192.168.1.1显示的是移动(输入192.168.1.1出现中国电信)
2023-12-04
车载U盘怎么恢复 车载u盘吧
2023-12-06
?Word图片居中后仍然偏右怎么办 Word文档让图片居中时在正中间的方法教程
2023-10-16