编程 HTML / CSS

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

Posted in HTML / CSS onFebruary 28, 2014

<!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>

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3中的元素过渡属性transition示例详解

Nov 30 HTML / CSS

html5 css3 动态气泡按钮实例演示

Dec 02 HTML / CSS

纯CSS3实现的8种Loading动画效果

Jul 05 HTML / CSS

利用纯css3实现的文字亮光特效的代码演示

Nov 27 HTML / CSS

CSS3与动画有关的属性transition、animation、transform对比（史上最全版）

Aug 18 HTML / CSS

HTML5 Canvas标签使用收录

Jul 07 HTML / CSS

HTML5 预加载让页面得以快速呈现

Aug 13 HTML / CSS

html5 viewport使用方法示例详解

Dec 02 HTML / CSS

html5实现多文件的上传示例代码

Feb 13 HTML / CSS

HTML5在canvas中绘制复杂形状附效果截图

Jun 23 HTML / CSS

快速创建 HTML5 Canvas 电信网络拓扑图的示例代码

Mar 21 HTML / CSS

html5关于外链嵌入页面通信问题(postMessage解决跨域通信)

Jul 20 HTML / CSS

css3中检验表单的required,focus,valid和invalid样式

Feb 21 #HTML / CSS

css3+jq创作含苞待放的荷花

Feb 20 #HTML / CSS

css3隔行变换色实现示例

Feb 19 #HTML / CSS

使用css3和jquery实现可伸缩搜索框

Feb 12 #HTML / CSS

css3与html5实现响应式导航菜单(导航栏)效果分享

Feb 12 #HTML / CSS

推荐10个CSS3 制作的创意下拉菜单效果

Feb 11 #HTML / CSS

纯css3显示隐藏一个div特效的具体实现

Feb 10 #HTML / CSS

You might like

显示youtube视频缩略图和Vimeo视频缩略图代码分享

2014/02/13 PHP

php中return的用法实例分析

2015/02/28 PHP

PHP在线书签系统分享

2016/01/04 PHP

CI框架整合smarty步骤详解

2016/05/19 PHP

JS仿flash上传头像效果实现代码

2011/07/18 Javascript

页面回到顶部的三种实现(锚标记，js)

2012/10/01 Javascript

js 判断计算字符串长度/判断空的简单方法

2013/08/05 Javascript

JS不能跨域借助jquery获取IP地址的方法

2014/08/20 Javascript

node.js中的http.response.writeHead方法使用说明

2014/12/14 Javascript

vue中实现滚动加载更多的示例

2017/11/08 Javascript

第一个Vue插件从封装到发布

2017/11/22 Javascript

nodejs取得当前执行路径的方法

2018/05/13 NodeJs

使用elementUI实现将图片上传到本地的示例

2018/09/04 Javascript

浅谈Vue数据响应

2018/11/05 Javascript

基于layPage插件实现两种分页方式浅析

2019/07/27 Javascript

JavaScript中的惰性载入函数及优势

2020/02/18 Javascript

vue实现把接口单独存放在一个文件方式

2020/08/13 Javascript

从零学Python之入门（三）序列

2014/05/25 Python

python Crypto模块的安装与使用方法

2017/12/21 Python

Python logging管理不同级别log打印和存储实例

2018/01/19 Python

python OpenCV学习笔记之绘制直方图的方法

2018/02/08 Python

Windows系统下PhantomJS的安装和基本用法

2018/10/21 Python

详解Python计算机视觉图像扭曲（仿射扭曲）

2019/03/27 Python

python二进制文件的转译详解

2019/07/03 Python

Tensorflow之梯度裁剪的实现示例

2020/03/08 Python

html5通过postMessage进行跨域通信的方法

2017/12/04 HTML / CSS

美国专业汽车音响和移动电子产品零售商：Car Toys

2019/05/13 全球购物

化工专业应届生求职信

2013/11/08 职场文书

群众路线剖析材料

2014/02/02 职场文书

《月亮湾》教学反思

2014/04/14 职场文书

2014年社区工作总结

2014/11/18 职场文书

2014年网络管理员工作总结

2014/12/01 职场文书

2015年试用期自我评价范文

2015/03/10 职场文书

革命电影观后感

2015/06/18 职场文书

小学中队长竞选稿

2015/11/20 职场文书

2016大学生就业指导课心得体会

2016/01/15 职场文书