相关疑难解决方法(0)

CSS3过渡不适用于display属性

每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.

到目前为止,我所要做的就是让隐藏的div显示,但是没有缓和的过渡.

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

这是我的代码:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

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; …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-transitions

36
推荐指数
3
解决办法
11万
查看次数

标签 统计

css ×1

css-transitions ×1

css3 ×1

html ×1