编程 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教程(5):网页背景图片

Apr 02 HTML / CSS

纯CSS3实现滚动的齿轮动画效果

Jun 05 HTML / CSS

CSS3实现多背景模拟动态边框的效果

Nov 08 HTML / CSS

CSS3 实现footer 固定在底部(无论页面多高始终在底部)

Oct 15 HTML / CSS

html5+css3之制作header实例与更新

Dec 21 HTML / CSS

深入研究HTML5实现图片压缩上传功能

Mar 25 HTML / CSS

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

Nov 20 HTML / CSS

详解Html5微信支付爬坑之路

Jul 24 HTML / CSS

检测浏览器是否支持html5视频的代码

Mar 28 HTML / CSS

用html5绘制折线图的实例代码

Mar 25 HTML / CSS

关于h5中的fetch方法解读(小结)

Nov 15 HTML / CSS

Canvas多边形绘制的实现方法

Aug 05 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 采集程序原理分析篇

2010/03/05 PHP

windows7下安装php的php-ssh2扩展教程

2014/07/04 PHP

Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法

2016/11/03 PHP

JavaScript 字符编码规则

2009/05/04 Javascript

JavaScript 操作键盘的Enter事件（键盘任何事件），兼容多浏览器

2010/10/11 Javascript

结合JQ1.9通过js正则判断各种浏览器版本的方法

2013/12/30 Javascript

调试JavaScript中正则表达式中遇到的问题

2015/01/27 Javascript

JQuery基础语法小结

2015/02/27 Javascript

jQuery操作基本控件方法实例分析

2015/12/31 Javascript

Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

2016/06/21 Javascript

从零开始学习Node.js系列教程六：EventEmitter发送和接收事件的方法示例

2017/04/13 Javascript

Ionic3实现图片瀑布流布局

2017/08/09 Javascript

Angular实现下拉框模糊查询功能示例

2018/01/03 Javascript

AngularJS实现的2048小游戏功能【附源码下载】

2018/01/03 Javascript

layui select动态添加option的实例

2018/03/07 Javascript

angularjs中判断ng-repeat是否迭代完的实例

2018/09/12 Javascript

JS实现提示效果弹出及延迟隐藏的功能

2019/08/26 Javascript

Angular短信模板校验代码

2020/09/23 Javascript

vant中的toast轻提示实现代码

2020/11/04 Javascript

JavaScript实现4位随机验证码的生成

2021/01/28 Javascript

[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启

2016/06/26 DOTA

[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18

2020/12/19 DOTA

python下如何查询CS反恐精英的服务器信息

2017/01/17 Python

python 禁止函数修改列表的实现方法

2017/08/03 Python

python简单图片操作：打开\显示\保存图像方法介绍

2017/11/23 Python

python定时关机小脚本

2018/06/20 Python

python opencv实现证件照换底功能

2019/08/19 Python

Python pickle模块实现对象序列化

2019/11/22 Python

Python matplotlib画图时图例说明(legend)放到图像外侧详解

2020/05/16 Python

Python安装Bs4的多种方法

2020/11/28 Python

canvas学习总结三之绘制路径-线段

2019/01/31 HTML / CSS

Casetify官网：自制专属手机壳、iPad护壳和Apple Watch手表带

2018/05/09 全球购物

一家专门经营包包的英国网站：MyBag

2019/09/08 全球购物

大学毕业感言100字

2014/02/03 职场文书

Windows下载并安装MySQL8.0.x 版本的完整教程

2022/04/10 MySQL

Oracle锁表解决方法的详细记录

2022/06/05 Oracle