html中使用过渡不显示,CSS3过渡不适用于显示属性

每当将鼠标悬停在其父元素上时，我一直试图使用css来显示Hidden Div淡入。

到目前为止，我所能做的就是让隐藏的div显示出来，但是到目前为止，还没有轻松的过渡。

这是我在JSfiddle上的代码http://jsfiddle.net/9dsGP/

这是我的代码：

HTML：

This is a Button

This is the Hidden Div

CSS：

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;

-moz-transition: all .3s ease .15s;

-o-transition: all .3s ease .15s;

-ms-transition: all .3s ease .15s;

transition: all .3s ease .15s;

opacity:0;

clear: both;

display: none;

top: -1px;

left:-160px;

padding: 8px;

min-height: 150px;

border-top: 1px solid #EEEEEE;

border-left: 1px solid #EEEEEE;

border-right: 1px solid #EEEEEE;

border-bottom: 1px solid #EEEEEE;

-webkit-border-radius: 0px 7px 7px 7px;

-moz-border-radius: 0px 7px 7px 7px;

-khtml-border-radius: 0px 7px 7px 7px;

border-radius: 0px 7px 7px 7px;

-webkit-box-shadow: 0px 2px 2px #DDDDDD;

-moz-box-shadow: 0px 2px 2px #DDDDDD;

box-shadow: 0px 2px 2px #DDDDDD;

background: #FFF;

}

关于我在做什么错的任何线索吗？当我将鼠标悬停在按钮上时，只是试图为隐藏的内容获得平滑的效果。提前致谢！

html中使用过渡不显示,CSS3过渡不适用于显示属性相关推荐

php鼠标悬浮显示,CSS3实现鼠标悬停显示扩展内容
本文给大家分享css3代码实现鼠标悬停显示要扩展的内容,在空间过于拥挤时需要隐藏部分内容使用此功能比较好,下面小编给带来了具体实现代码,一起看看吧我们在做导航标签的时候,有时会出现空间过于拥挤需要隐 ...
kb2919442不适用计算机,无法更新kb2919442，kb2919355，显示此更新不适用于你的计算机，求助...
您好, KB2919442 是 Windows 8.1 更新的先决条件,在尝试安装 KB2919355 之前应先安装 clearcompressionflag.exe clearcompression ...
使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
关于工具: 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rg ...
html中设置过渡效果,CSS3 过渡
CSS3 过渡 CSS3 过渡通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到下面的元素上: ...
好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
css 字体颜色阶梯过渡,CSS3——过渡（transition）
一.概述 CSS属性的值从一个值变成另一个值的过程叫做渐变,重点突出变化的过程.CSS3 transition系列属性可控制这个变化过程,使得属性值变化过程更加平滑.一个过渡应包含这几个属性: A:哪 ...
css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件介绍 ( Introduction ) Off Canvas Me ...
从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡语法: transition: 过渡属性过渡时间延迟时间过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
css3过渡缓慢排过去,css3过渡
过渡 transition 什么是过渡呢过度就是两个状态的一个变化过程我们给元素设置css3样式transition后,就会产生过渡,从一个状态到另一个状态,过渡需要我们去触发,才会有效果简单例 ...

html中使用过渡不显示,CSS3过渡不适用于显示属性

html中使用过渡不显示,CSS3过渡不适用于显示属性相关推荐

最新文章

热门文章