编程 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动画之利用requestAnimationFrame触发重新播放功能

Sep 11 HTML / CSS

简单总结CSS3中视窗单位Viewport的常见用法

Feb 04 HTML / CSS

解决CSS3的opacity属性带来的层叠顺序问题

May 09 HTML / CSS

CSS3下的渐变文字效果实现示例

Mar 02 HTML / CSS

video结合canvas实现视频在线截图功能

Jun 25 HTML / CSS

分享一个H5原生form表单的checkbox特效代码

Feb 26 HTML / CSS

详解FireFox下Canvas使用图像合成绘制SVG的Bug

Jul 10 HTML / CSS

html5 worker 实例(二) 图片变换效果

Jun 24 HTML / CSS

使用html5 canvas 画时钟代码实例分享

Nov 11 HTML / CSS

HTML5+CSS3绘制锯齿状的矩形

Mar 01 HTML / CSS

Html5获取高德地图定位天气的方法

Dec 26 HTML / CSS

CSS 实现多彩、智能的阴影效果

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

配置支持SSI

2006/11/25 PHP

php 中的str_replace 函数总结

2007/04/27 PHP

用PHP来计算某个目录大小的方法

2014/04/01 PHP

Laravel 5.2 文档数据库 ―― 起步介绍

2019/10/21 PHP

JQuery 学习笔记01 JQuery初接触

2010/05/06 Javascript

JS实现仿雅虎首页快捷登录入口及导航模块效果

2015/09/19 Javascript

学习AngularJs:Directive指令用法（完整版）

2016/04/26 Javascript

快速获取/设置iframe内对象元素的几种js实现方法

2016/05/20 Javascript

Ajax的概述与实现过程

2016/11/18 Javascript

ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!

2017/03/14 Javascript

详解vuejs之v-for列表渲染

2017/06/22 Javascript

React服务端渲染（总结）

2017/07/01 Javascript

解决vue 引入子组件报错的问题

2018/09/06 Javascript

jQuery.validate.js表单验证插件的使用代码详解

2018/10/22 jQuery

node.js中Buffer缓冲器的原理与使用方法分析

2019/11/23 Javascript

VueX模块的具体使用(小白教程)

2020/06/05 Javascript

浅谈实现在线预览PDF的几种解决办法

2020/08/10 Javascript

[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01

2020/11/02 DOTA

Python使用scrapy采集数据过程中放回下载过大页面的方法

2015/04/08 Python

python批量下载网站马拉松照片的完整步骤

2018/12/05 Python

python实现小世界网络生成

2019/11/21 Python

python ubplot使用方法解析

2020/01/10 Python

Python figure参数及subplot子图绘制代码

2020/04/18 Python

python利用pytesseract 实现本地识别图片文字

2020/12/14 Python

python基于opencv 实现图像时钟

2021/01/04 Python

python爬虫scrapy框架的梨视频案例解析

2021/02/20 Python

html5借用repeating-linear-gradient实现一把刻度尺（ruler）

2019/09/09 HTML / CSS

哈曼俄罗斯官方网上商店：Harman.club

2020/07/24 全球购物

英国领先的在线鱼贩：The Fish Society

2020/08/12 全球购物

教你怎样写好自我评价

2013/10/05 职场文书

生物科学专业职业规划书范文

2014/02/11 职场文书

工商管理专业大学生职业生涯规划范文

2014/03/09 职场文书

单位消防安全责任书

2014/07/23 职场文书

2014矛盾纠纷排查调处工作总结

2014/12/09 职场文书

物业保洁员管理制度

2015/08/05 职场文书

2016春季幼儿园大班开学寄语

2015/12/03 职场文书