css中将鼠标放到一个div上显示出另一个隐藏的div
2015-10-20 23:42
726 查看
<span style="font-size:18px;"><!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>CSS Test Page</title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ background:#0CF; height:200px; width:200px; margin-left: 20px; margin-top: 20px; } #show{ width:200px; height:200px; margin-top: 20px; background:#F09; top:0px; position:absolute; opacity: 0; display: block; font-size: 12px; transition: 0.3s; -webkit-transition: .5s; -moz-transition: .5s; } #content:hover #show{ color: #656e73; opacity: 1; } </style> </head> <body> <div id="content"> 这是原本的div层 <div id="show"> <p>这是鼠标移动上去后的div层</p> </div> </div> </body> </html> </span>
相关文章推荐
- How Do I Target IE7 or IE8 Using CSS Hacks?
- css中padding 和 margin的格式
- CSS z-index 属性的使用方法和层级树的概念
- CSS实现不定高度垂直居中 兼容IE7
- IE6 IE7 IE8 IE9 IE10 Css hack及IE条件注释法
- Atom编辑器折腾记_(17)atom-minify[CSS/JS压缩神器]
- Atom编辑器折腾记_(17)atom-minify[CSS/JS压缩神器]
- css3 tranform transition animation
- CSS 的overflow:hidden 属性详细解释
- 如何访问到静态的文件,如jpg,js,css?
- css 图片/元素旋转代码
- iOS 改变状态栏的颜色(样式)
- java web下WebContent下的js.css无法访问
- css 元素跳动代码
- CSS 框模型Margin ,Border ,Padding ,Content
- css3 动画效果
- CSS布局基础
- Orchard模块中使用css和js
- grid---样式
- css媒体查询实现响应式设计