编程 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中用animation的steps属性制作帧动画

Apr 25 HTML / CSS

Web页面中八种创建多列等高(等高列布局)的实现技术

Dec 24 HTML / CSS

HTML5新控件之日期和时间选择输入的实现代码

Sep 13 HTML / CSS

HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述

Jan 30 HTML / CSS

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

Jan 31 HTML / CSS

HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）

May 07 HTML / CSS

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

Jun 23 HTML / CSS

HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线

Jan 01 HTML / CSS

浅谈html5之sse服务器发送事件EventSource介绍

Aug 28 HTML / CSS

详解html5页面 rem 布局适配方法

Jan 12 HTML / CSS

HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧

Aug 28 HTML / CSS

H5页面适配iPhoneX(就是那么简单)

Dec 02 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处理json时中文问题的解决方法

2011/04/12 PHP

PHP跨平台获取服务器IP地址自定义函数分享

2014/12/29 PHP

自己写的php curl库实现整站克隆功能

2015/02/12 PHP

php中数组最简单的使用方法

2020/12/27 PHP

JavaScript 应用类库代码

2008/06/02 Javascript

jQuery实现切换页面布局使用介绍

2011/10/09 Javascript

谈谈Jquery中的children find 的区别有哪些

2015/10/19 Javascript

原生JS实现平滑回到顶部组件

2016/03/16 Javascript

简单掌握JavaScript中const声明常量与变量的用法

2016/05/21 Javascript

精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局)

2016/07/01 Javascript

jQuery ztree实现动态树形多选菜单

2016/08/12 Javascript

seajs模块之间依赖的加载以及模块的执行

2016/10/21 Javascript

ES6正则表达式的一些新功能总结

2017/05/09 Javascript

如何以Angular的姿势打开Font-Awesome详解

2018/04/22 Javascript

react 原生实现头像滚动播放的示例

2020/04/21 Javascript

JavaScript或jQuery 获取option value值方法解析

2020/05/12 jQuery

Vue组件简易模拟实现购物车

2020/12/21 Vue.js

Python 中的with关键字使用详解

2016/09/11 Python

Python遍历pandas数据方法总结

2018/02/09 Python

深入理解python中sort()与sorted()的区别

2018/08/29 Python

python+mysql实现教务管理系统

2019/02/20 Python

解决使用export_graphviz可视化树报错的问题

2019/08/09 Python

Python3 获取文件属性的方式(时间、大小等)

2020/03/12 Python

Anaconda配置pytorch-gpu虚拟环境的图文教程

2020/04/16 Python

使用pandas库对csv文件进行筛选保存

2020/05/25 Python

Python创建简单的神经网络实例讲解

2021/01/04 Python

多视角3D逼真HTML5水波动画

2016/03/03 HTML / CSS

床上用品全球在线购物：BeddingInn

2016/12/18 全球购物

简单说说tomcat的配置

2013/05/28 面试题

连锁经营管理专业大学生求职信

2013/10/30 职场文书

银行领导证婚词

2014/01/11 职场文书

村庄绿化方案

2014/05/07 职场文书

党校学习党性分析材料

2014/12/19 职场文书

三严三实·严以律己心得体会

2016/01/13 职场文书

《金钱的魔力》教学反思

2016/02/20 职场文书

如何设置多台电脑共享打印机?多台电脑共享打印机的方法

2022/04/08 数码科技