您现在的位置是：网站首页> 编程资料编程资料

纯CSS3实现鼠标悬停提示气泡效果CSS3 仿微信聊天小气泡实例代码HTML5-WebSocket实现聊天室示例HTML5仿手机微信聊天界面纯CSS实现聊天框小尖角、气泡效果利用html5的websocket实现websocket聊天室纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)如何弹出QQ临时对话框实现不添加好友在线交谈效果CSS3制作气泡对话框的实例教程可自定义箭头样式的CSS3气泡提示框利用CSS3实现气泡效果的教程

2023-10-26 194人已围观

简介鼠标悬停就是指我们鼠标指向菜单时提示此菜单的相关功能与内容了，下面我们使用纯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; /* 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>

提示：您可以先修改部分代码再运行

上一篇：我叫MT3月20日例行维护时间和维护内容介绍_手机游戏_游戏攻略_

下一篇：CSS行为expression轻松实现IE6无抖动固定定位CSS expression判断表达式设置input样式CSS expression在Chrome的问题优化浏览器渲染避免CSS expressionsCSS中使用expression完美设置页面最小宽度(兼容ie)css expression使用概述及其优缺点介绍CSS表达式(expression)解决IE6 position:fixed无效问题CSS中使用expression表达式

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢