纯CSS3实现鼠标悬停提示气泡效果

发布时间：2014-02-28 11:09:39 作者：佚名

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

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

Tag：鼠标悬停气泡

CSS3 仿微信聊天小气泡实例代码
本篇文章主要介绍了CSS3 仿微信聊天小气泡实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-05
HTML5-WebSocket实现聊天室示例
本篇文章主要介绍了HTML5-WebSocket实现聊天室示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2016-12-15
HTML5仿手机微信聊天界面
这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-03-18
纯CSS实现聊天框小尖角、气泡效果
经常看到这样的尖角，以前不懂，以为都是用图片做出来的，后来惊奇的发现，原来很多都是用CSS做出来的，既美观又节省资源，真是两全其美啊！
2014-04-04
利用html5的websocket实现websocket聊天室
利用html5的websocket实现一个聊天室，大家可以参考使用
2013-12-12
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
这篇文章主要介绍了纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式),本文给出了HTML和CSS实现代码,并给出了完整代码下载,需要的朋友可以参考下
2015-04-24
如何弹出QQ临时对话框实现不添加好友在线交谈效果
如何不添加好友弹出QQ临时对话框实现在线交谈效果，这样的一个需求，我们真的是太需要了，实现起来也很简单，一行代码即可搞定，需要的朋友可以参考下
2021-03-19
CSS3制作气泡对话框的实例教程
这篇文章主要介绍了CSS3制作气泡对话框的实例教程,同时讲到了对气泡的垂直居中的设定技巧,需要的朋友可以参考下
2016-05-10
可自定义箭头样式的CSS3气泡提示框
这篇文章主要介绍了一款可自定义箭头样式的CSS3气泡提示框，CSS气泡提示框由纯CSS完成，最大的特点就是可以自定义配置，包括文字颜色、背景颜色和箭头方向等，想要拥有这款
2016-03-16
利用CSS3实现气泡效果的教程
这篇文章主要介绍了利用CSS3实现气泡效果的教程,就是经常被用于对话框的那种,需要的朋友可以参考下
2015-07-03

纯CSS3实现鼠标悬停提示气泡效果

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容