编程 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实例分享--超炫checkbox复选框和radio单选框

Sep 01 HTML / CSS

CSS3中线性颜色渐变的一些实现方法

Jul 14 HTML / CSS

Html5游戏开发之乒乓Ping Pong游戏示例(一)

Jan 21 HTML / CSS

突袭HTML5之Javascript API扩展3—本地存储全新体验

Jan 31 HTML / CSS

html5使用canvas实现跟随光标跳动的火焰效果

Jan 07 HTML / CSS

一波HTML5 Canvas基础绘图实例代码集合

Feb 28 HTML / CSS

H5调用相机拍照并压缩图片的实例代码

Jul 20 HTML / CSS

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

Aug 31 HTML / CSS

HTML5 weui使用笔记

Nov 21 HTML / CSS

canvas 绘图时位置偏离的问题解决

Sep 16 HTML / CSS

HTML中table表格拆分合并(colspan、rowspan)

Apr 07 HTML / CSS

详解CSS中postion和opacity及cursor的特性

Aug 14 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 数组的创建、调用和更新实现代码

2009/03/09 PHP

LotusPhp笔记之:Cookie组件的使用详解

2013/05/06 PHP

php生成随机密码自定义函数代码（简单快速）

2014/05/10 PHP

php+jQuery+Ajax实现点赞效果的方法(附源码下载)

2020/07/21 PHP

php fread读取文件注意事项

2016/09/24 PHP

JQuery 小练习(实例代码)

2009/08/07 Javascript

js验证电话号码与手机支持+86的正则表达式

2014/01/23 Javascript

js监听鼠标事件控制textarea输入字符串的个数

2014/09/29 Javascript

最新最热最实用的15个jQuery插件汇总

2015/07/05 Javascript

JavaScript焦点事件、鼠标事件和滚轮事件使用详解

2016/01/15 Javascript

Vue.js报错Failed to resolve filter问题的解决方法

2016/05/25 Javascript

javascript类型系统——日期Date对象全面了解

2016/07/13 Javascript

jQuery异步提交表单的两种方式

2016/09/13 Javascript

js实现页面刷新滚动条位置不变

2016/11/27 Javascript

bootstrap网格系统使用方法解析

2017/01/13 Javascript

jQuery中的类名选择器（.class）用法简单示例

2018/05/14 jQuery

利用JS实现一个同Excel表现的智能填充算法

2018/08/13 Javascript

使用form-create动态生成vue自定义组件和嵌套表单组件

2019/01/18 Javascript

vue-cli3 项目从搭建优化到docker部署的方法

2019/01/28 Javascript

vue父组件触发事件改变子组件的值的方法实例详解

2019/05/07 Javascript

Webpack按需加载打包chunk命名的方法

2019/09/22 Javascript

浅谈Node新版本13.2.0正式支持ES Modules特性

2019/11/25 Javascript

js里面的变量范围分享

2020/07/18 Javascript

python遍历数组的方法小结

2015/04/30 Python

Python基础篇之初识Python必看攻略

2016/06/23 Python

PyQt弹出式对话框的常用方法及标准按钮类型

2019/02/27 Python

超简单使用Python换脸实例

2019/03/27 Python

Tripadvisor新西兰：阅读评论，比较价格和酒店预订

2018/02/10 全球购物

巴基斯坦购物网站：Goto

2019/03/11 全球购物

KIKO MILANO俄罗斯官网：意大利领先的化妆品和护肤品品牌

2021/01/09 全球购物

密封类可以有虚函数吗

2014/08/11 面试题

计算机专业毕业生自荐信

2013/12/31 职场文书

小学红领巾广播稿（3篇）

2014/09/13 职场文书

开展党的群众路线教育实践活动总结报告

2014/10/31 职场文书

六一文艺汇演开幕词

2015/01/29 职场文书

vue如何使用模拟的json数据查看效果

2022/03/31 Vue.js