编程 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实现图片无间断轮播效果

Aug 25 HTML / CSS

CSS3实现超慢速移动动画效果非常流畅无卡顿

Jun 15 HTML / CSS

css3实例教程一款纯css3实现的发光屏幕旋转特效

Dec 07 HTML / CSS

使用css3实现的windows8开机加载动画

Dec 09 HTML / CSS

css3的动画特效之动画序列（animation）

Dec 22 HTML / CSS

html5 canvas 使用示例

Oct 22 HTML / CSS

五个2015 年最佳HTML5 框架

Nov 11 HTML / CSS

canvas实现圆形进度条动画的示例代码

Dec 26 HTML / CSS

canvas离屏技术与放大镜实现代码示例

Aug 31 HTML / CSS

html5移动端价格输入键盘的实现

Sep 16 HTML / CSS

html5小程序飞入购物车(抛物线绘制运动轨迹点)

Oct 19 HTML / CSS

面试必问:圣杯布局和双飞翼布局的区别

May 13 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

PHP几个数学计算的内部函数学习整理

2011/08/06 PHP

用php来改写404错误页让你的页面更友好

2013/01/24 PHP

input file获得文件根目录简单实现

2013/04/26 PHP

PHP使用Nginx实现反向代理

2017/09/20 PHP

PHP date()格式MySQL中插入datetime方法

2019/01/29 PHP

解决php用mysql方式连接数据库出现Deprecated报错问题

2019/12/25 PHP

JS表单验证的代码(常用)

2016/04/08 Javascript

归纳下js面向对象的几种常见写法总结

2016/08/24 Javascript

JS遍历ul下的li点击弹出li的索引的实现方法

2016/09/19 Javascript

VUE开发一个图片轮播的组件示例代码

2017/03/06 Javascript

使用nodeJs来安装less及编译less文件为css文件的方法

2017/11/20 NodeJs

Vue 项目代理设置的优化

2018/04/17 Javascript

使用webpack打包后的vue项目如何正确运行（express）

2018/10/26 Javascript

零基础写python爬虫之抓取糗事百科代码分享

2014/11/06 Python

python通过yield实现数组全排列的方法

2015/03/18 Python

Python实现监控程序执行时间并将其写入日志的方法

2015/06/30 Python

python列出目录下指定文件与子目录的方法

2015/07/03 Python

Python模块包中__init__.py文件功能分析

2016/06/14 Python

基于ID3决策树算法的实现(Python版)

2017/05/31 Python

python利用urllib实现爬取京东网站商品图片的爬虫实例

2017/08/24 Python

Python读取txt文件数据的方法(用于接口自动化参数化数据)

2018/06/27 Python

python 将字符串中的数字相加求和的实现

2019/07/18 Python

后端开发使用pycharm的技巧(推荐)

2020/03/27 Python

Lampenwelt德国：欧洲领先的灯具和照明在线商店

2018/08/05 全球购物

会计与审计专业大专生求职信

2013/10/03 职场文书

工地安全生产标语

2014/06/06 职场文书

资源环境与城乡规划管理专业自荐书

2014/09/26 职场文书

初中生考试作弊检讨书

2014/12/14 职场文书

周恩来的四个昼夜观后感

2015/06/03 职场文书

地道战观后感500字

2015/06/04 职场文书

小学运动会入场词

2015/07/18 职场文书

2015年社区重阳节活动总结

2015/07/30 职场文书

2019年最新证婚词精选集！

2019/06/28 职场文书

ORACLE查看当前账号的相关信息

2021/06/18 Oracle

java中重写父类方法加不加@Override详解

2021/06/21 Java/Android

Python字符串格式化方式

2022/04/07 Python