• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 纯CSS3实现鼠标悬停提示气泡效果

纯CSS3实现鼠标悬停提示气泡效果

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含鼠标悬停,气泡等相关知识,佚名 希望在学习及工作中可以帮助到您


<!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制作的鼠标悬停时边框旋转
  • CSS3实现鼠标悬停显示扩展内容
  • css实现鼠标悬停时滑出层提示的方法
  • CSS3使用transition实现的鼠标悬停淡入淡出
  • 一款纯css3实现的鼠标悬停动画按钮
  • 纯css3实现的鼠标悬停动画按钮
  • 一款纯css3实现的非常实用的鼠标悬停特效演示
  • 利用css3实现的简单的鼠标悬停按钮
  • 纯CSS3实现鼠标悬停提示气泡效果
  • css简单实现热点链接当鼠标悬停时出现白色的框

相关文章

  • 2017-08-06利用CSS实现书签效果实例源码
  • 2017-08-06CSS的background属性及CSS3的背景图片设置总结
  • 2017-08-06IE6浏览器不支持固定定位(position:fixed)解决方案
  • 2017-08-06css自动换行 防止撑破div影响排版
  • 2017-08-06css盒模型和块级、行内元素深入理解
  • 2017-08-06举例详解CSS中position属性的使用
  • 2017-08-06Bootstrap在windows phone 8下不兼容的解决方法
  • 2017-08-06select和input不会继承字号body font-size
  • 2017-08-06DIV设置浮动后无法撑开外部DIV的解决办法
  • 2017-08-06纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果
    • 子元素div高度不确定时父div高度如何自适应
    • ie8 background背景图片没有显示
    • div+CSS制作类似微信对话气泡效果的实例总结
    • CSS中的一些百分比相关调试经验分享
    • !important用法使用介绍
    • 采用CSS定位属性实现Html中DIV层叠与悬浮
    • IE6 innerHTML写入的iframe src不显示BUG的解决方法
    • IE6/7下多种方法移除button、input 默认边框和去掉焦点线
    • CSS去除列表默认边距的简单方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有