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

使用HTML5和CSS3表单验证功能

May 05 HTML / CSS

用CSS3绘制三角形的简单方法

Jul 17 HTML / CSS

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

Mar 07 HTML / CSS

CSS3实现多重边框的方法总结

May 31 HTML / CSS

html5 css3网站菜单实现代码

Dec 23 HTML / CSS

html5小技巧之通过document.head获取head元素

Jun 04 HTML / CSS

详解快速开发基于 HTML5 网络拓扑图应用

Jan 08 HTML / CSS

小程序canvas中文字设置居中锚点

Apr 16 HTML / CSS

遮罩层 + Iframe实现界面自动显示的示例代码

Apr 26 HTML / CSS

H5 video poster属性设置视频封面的方法

May 25 HTML / CSS

css3实现的加载动画效果

Apr 07 HTML / CSS

CSS实现渐变色边框(Gradient borders)的5种方法

Mar 25 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代码收集表单内容并写入文件的代码

2012/01/29 PHP

叫你如何修改Nginx与PHP的文件上传大小限制

2014/09/10 PHP

简单介绍PHP非阻塞模式

2016/03/03 PHP

CSS3画一个阴阳八卦图

2021/03/09 HTML / CSS

jquery解决图片路径不存在执行替换路径

2013/02/06 Javascript

基于dom编程中动态创建与删除元素的使用

2013/04/17 Javascript

nodejs教程之环境安装及运行

2014/11/21 NodeJs

使用js实现的简单拖拽效果

2015/03/18 Javascript

nodejs中实现阻塞实例

2015/03/24 NodeJs

jquery结婚电子请柬特效源码分享

2015/08/21 Javascript

通过XMLHttpRequest和jQuery实现ajax的几种方式

2015/08/28 Javascript

SWFUpload多文件上传及文件个数限制的方法

2016/05/31 Javascript

jQuery实现区域打印功能代码详解

2016/06/17 Javascript

浅析Javascript ES6中的原生Promise

2016/08/25 Javascript

jQuery中select与datalist制作下拉菜单时的区别浅析

2016/12/30 Javascript

JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】

2017/01/22 Javascript

Bootstrap模态框使用详解

2017/02/15 Javascript

Three.js的使用及绘制基础3D图形详解

2017/04/27 Javascript

利用PM2部署node.js项目的方法教程

2017/05/10 Javascript

浅谈Vue-cli 命令行工具分析

2017/11/22 Javascript

Vue弹出菜单功能的实现代码

2018/09/12 Javascript

Python手机号码归属地查询代码

2016/05/04 Python

Python使用Srapy框架爬虫模拟登陆并抓取知乎内容

2016/07/02 Python

Python静态类型检查新工具之pyright 使用指南

2019/04/26 Python

Python3模拟curl发送post请求操作示例

2019/05/03 Python

Django rstful登陆认证并检查session是否过期代码实例

2019/08/13 Python

利用Python脚本批量生成SQL语句

2020/03/04 Python

Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)

2020/08/07 Python

python输出国际象棋棋盘的实例分享

2020/11/26 Python

美国最流行的男士时尚网站：Touch of Modern

2018/02/05 全球购物

string = null 和string ＝ ''的区别

2013/04/28 面试题

学校经典推荐信

2013/10/30 职场文书

2014年小班元旦活动方案

2014/02/16 职场文书

领导失职检讨书

2014/02/24 职场文书

蓝天保卫战收官在即：15行业将开展环保分级评价

2019/07/19 职场文书

Python中OpenCV实现简单车牌字符切割

2021/06/11 Python