编程 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制作3D效果文字具体实现样式

May 02 HTML / CSS

一款css实现的鼠标经过按钮的特效

Sep 11 HTML / CSS

CSS3 :default伪类选择器使用简介

Mar 15 HTML / CSS

html+css3实现的登录界面

Dec 09 HTML / CSS

css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果

Jan 27 HTML / CSS

基于HTML5 Canvas 实现商场监控实例详解

Nov 20 HTML / CSS

canvas三角函数模拟水波效果的示例代码

Jul 03 HTML / CSS

html5中地理位置定位api接口开发应用小结

Jan 04 HTML / CSS

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

Jan 01 HTML / CSS

详解HTML5中的Communication API基本使用方法

Jan 29 HTML / CSS

详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案

Dec 03 HTML / CSS

基于HTML5+CSS3实现简单的时钟效果

Sep 11 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

文章推荐系统（三）

2006/10/09 PHP

基于mysql的论坛（4）

2006/10/09 PHP

php做下载文件的实现代码及文件名中乱码解决方法

2011/02/03 PHP

使用php完成常见的文件上传功能(推荐)

2017/01/13 PHP

php单元测试phpunit入门实例教程

2017/11/17 PHP

Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法

2018/08/16 PHP

laravel 配置路由 api和web定义的路由的区别详解

2019/09/03 PHP

PHP实现一个限制实例化次数的类示例

2019/09/16 PHP

jquery ajax,ashx,json的用法总结

2014/02/12 Javascript

可恶的ie8提示缺少id未定义

2014/03/20 Javascript

jQuery实现统计复选框选中数量

2014/11/24 Javascript

JS实现仿google、百度搜索框输入信息智能提示的实现方法

2015/04/20 Javascript

javascript移动开发中touch触摸事件详解

2016/03/18 Javascript

深入学习js瀑布流布局

2016/10/14 Javascript

JS实现新建文件夹功能

2017/06/17 Javascript

webpack4.x开发环境配置详解

2018/08/04 Javascript

详解JQuery基础动画操作

2019/04/12 jQuery

react高阶组件添加和删除props

2019/04/26 Javascript

VueJS 取得 URL 参数值的方法

2019/07/19 Javascript

es5 类与es6中class的区别小结

2020/11/09 Javascript

[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK

2014/05/26 DOTA

python库lxml在linux和WIN系统下的安装

2018/06/24 Python

Python实现批量修改图片格式和大小的方法【opencv库与PIL库】

2018/12/03 Python

对Python3 * 和 ** 运算符详解

2019/02/16 Python

flask应用部署到服务器的方法

2019/07/12 Python

浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)

2019/08/12 Python

Python grequests模块使用场景及代码实例

2020/08/10 Python

Python实现AES加密，解密的两种方法

2020/10/03 Python

用ldap作为django后端用户登录验证的实现

2020/12/07 Python

基于tensorflow __init__、build 和call的使用小结

2021/02/26 Python

CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码

2020/11/30 HTML / CSS

新西兰演唱会和体育门票网站：Ticketmaster新西兰

2017/10/07 全球购物

妇联主席先进事迹

2014/05/18 职场文书

学习三严三实心得体会

2014/10/13 职场文书

经理助理岗位职责

2015/02/02 职场文书

JS前端可扩展的低代码UI框架Sunmao使用详解

2022/07/23 Javascript