编程 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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)

Jan 07 HTML / CSS

CSS3图片旋转特效(360/60/-360度)

Oct 10 HTML / CSS

CSS3对背景图片的裁剪及尺寸和位置的设定方法

Mar 07 HTML / CSS

CSS3 创建网页动画实现弹跳球动效果

Oct 30 HTML / CSS

CSS3实现div从下往上滑入滑出效果示例

Apr 28 HTML / CSS

详解HTML5表单新增属性

Dec 21 HTML / CSS

HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

Jan 30 HTML / CSS

html5模拟平抛运动(模拟小球平抛运动过程)

Jul 25 HTML / CSS

html5 viewport使用方法示例详解

Dec 02 HTML / CSS

Canvas制作旋转的太极的示例

Mar 09 HTML / CSS

HTML5 新表单类型示例代码

Mar 20 HTML / CSS

萌新HTML5 入门指南（二）

Nov 09 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

使用gd库实现php服务端图片裁剪和生成缩略图功能分享

2013/12/25 PHP

PHP简单的MVC框架实现方法

2015/12/01 PHP

php获取是星期几的的一些常用姿势

2019/12/15 PHP

JavaScript入门教程(5) js Screen屏幕对象

2009/01/31 Javascript

Firefox div高度自适应

2009/04/28 Javascript

js控制iframe的高度/宽度让其自适应内容

2014/04/09 Javascript

js实现简单折叠、展开菜单的方法

2015/08/28 Javascript

深入浅析javascript立即执行函数

2015/10/23 Javascript

jQuery实现打开页面渐现效果示例

2016/07/27 Javascript

JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查

2017/04/28 Javascript

nodejs批量下载图片的实现方法

2017/05/19 NodeJs

Vue项目中跨域问题解决方案

2018/06/05 Javascript

ES6与CommonJS中的模块处理的区别

2018/06/13 Javascript

react实现换肤功能的示例代码

2018/08/14 Javascript

利用jqgrid实现上移下移单元格功能

2018/11/07 Javascript

详解如何使用nvm管理Node.js多版本

2019/05/06 Javascript

Flutter部件内部状态管理小结之实现Vue的v-model功能

2019/06/11 Javascript

Promise扫盲贴

2019/06/24 Javascript

基于JavaScript获取base64图片大小

2019/10/18 Javascript

vue设置一开始进入的页面教程

2019/10/28 Javascript

[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD

2014/05/25 DOTA

[02:49:21]2019完美盛典全程录像

2019/12/08 DOTA

Python3.5面向对象编程图文与实例详解

2019/04/24 Python

Python3爬虫中Ajax的用法

2020/07/10 Python

Python 列表反转显示的四种方法

2020/11/16 Python

深入理解HTML5定时器requestAnimationFrame的使用

2018/12/12 HTML / CSS

妇产科护士自我鉴定

2013/10/15 职场文书

保险专业大专生求职信

2013/10/26 职场文书

平面设计师的工作职责

2013/11/21 职场文书

舞蹈教育学专业推荐信

2013/11/27 职场文书

医院节能减排方案

2014/06/13 职场文书

政府四风问题整改措施

2014/10/04 职场文书

详解vue中v-for的key唯一性

2021/05/15 Vue.js

浅析Django接口版本控制

2021/06/26 Python

JPA 通过Specification如何实现复杂查询

2021/11/23 Java/Android

Redis实现一个账号只能登录一个设备

2022/04/19 Redis