编程 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 相关文章推荐

css 省略号 css3让多余的字符串消失并附加省略号的实现代码

Feb 07 HTML / CSS

如何利用CSS3制作3D效果文字具体实现样式

May 02 HTML / CSS

使用CSS3来制作消息提醒框

Jul 12 HTML / CSS

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

Nov 16 HTML / CSS

html5基础标签(html5视频标签 html5新标签用法)

Dec 30 HTML / CSS

HTML5有哪些新特征

Dec 01 HTML / CSS

探索HTML5本地存储功能运用技巧

Mar 02 HTML / CSS

canvas绘制圆角头像的实现方法

Jan 17 HTML / CSS

移动端Html5中百度地图的点击事件

Jan 31 HTML / CSS

canvas绘图按照contain或者cover方式适配并居中显示

Feb 18 HTML / CSS

html5手机键盘弹出收起的处理

Jan 20 HTML / CSS

CSS3点击按钮圆形进度打钩效果的实现代码

Mar 30 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

提高define性能的php扩展hidef的安装和使用

2011/06/14 PHP

关于Iframe如何跨域访问Cookie和Session的解决方法

2013/04/15 PHP

php字符串函数学习之strstr()

2015/03/27 PHP

PHP实现获取第一个中文首字母并进行排序的方法

2017/05/09 PHP

Javascript中Eval函数的使用

2010/03/23 Javascript

jquery1.4.2 for Visual studio 2010 模板文件

2010/07/14 Javascript

文本框input聚焦失焦样式实现代码

2012/10/12 Javascript

js获取窗口相对于屏幕左边和上边的位置坐标

2014/05/15 Javascript

使用jQuery实现星级评分代码分享

2014/12/09 Javascript

jQuery对象的selector属性用法实例

2014/12/27 Javascript

javascript中return，return true,return false三者的用法及区别

2015/11/17 Javascript

D3.js实现直方图的方法详解

2016/09/25 Javascript

基于JS快速实现导航下拉菜单动画效果附源码下载

2016/10/27 Javascript

Intellij IDEA搭建vue-cli项目的方法步骤

2018/10/20 Javascript

layui: layer.open加载窗体时出现遮罩层的解决方法

2019/09/26 Javascript

JavaScript随机数的组合问题案例分析

2020/05/16 Javascript

html+vue.js 实现漂亮分页功能可兼容IE

2020/11/07 Javascript

[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事

2014/07/10 DOTA

Python urlopen()函数示例分享

2014/06/12 Python

Python类的继承用法示例

2019/01/31 Python

NumPy 基本切片和索引的具体使用方法

2019/04/24 Python

pybind11在Windows下的使用教程

2019/07/04 Python

如何基于Python爬取隐秘的角落评论

2020/07/02 Python

Python实现冒泡排序算法的完整实例

2020/11/04 Python

Veronica Beard官网：在酷、经典和别致之间找到了平衡

2018/01/11 全球购物

英国领先的高街书籍专家：Waterstones

2018/02/01 全球购物

linux系统都有哪些运行级别

2016/03/26 面试题

班主任寄语大全

2014/04/04 职场文书

水利水电专业自荐信

2014/07/08 职场文书

个人租房协议书范本

2014/09/30 职场文书

长江三峡导游词

2015/01/31 职场文书

教导主任个人总结

2015/03/03 职场文书

2015年教师节广播稿

2015/08/19 职场文书

golang通过递归遍历生成树状结构的操作

2021/04/28 Golang

Vue全局事件总线你了解吗

2022/02/24 Vue.js

如何Python使用re模块实现okenizer

2022/04/30 Python