I've a div like this:
.x{
...
}
并且有一种初始情况下隐藏的“子菜单”:
.x_submenu {
...
display:none;
...
}
只有当用户在x div上时,子菜单才会可见:
div.x:hover .x_submenu {display:block; }
现在,我想通过一个交易或效果使其可见性更加“缓慢”地显示出来。 是否有一种方法可以实现这个目标,可能是跨浏览器的解决方案? 谢谢, A
I've a div like this:
.x{
...
}
并且有一种初始情况下隐藏的“子菜单”:
.x_submenu {
...
display:none;
...
}
只有当用户在x div上时,子菜单才会可见:
div.x:hover .x_submenu {display:block; }
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
CSS:
div
{
opacity:0;
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
opacity:100;
width:300px;
}
Set the height to 0.
Set the opacity to 0.
Position the element outside of the frame of another element that has overflow: hidden.
为了让你的过渡效果“跨浏览器”:
.transition {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
display: none;
改为 opacity: 0;
(考虑所有浏览器的兼容性),并将 display: block; 改为 opacity: 1; 过渡效果应该会生效。如果你希望在物品处于 0 不透明度时使它们对鼠标不可见(无法点击或检测到),可以添加pointer-events: none;
连同其所在的条带 opacity: 0;
一起
pointer-events: auto;
在哪里可见。
没有。CSS过渡仅适用于标量值,因此可以应用于处理尺寸、颜色(因为这些也表示为rgb值)、不透明度等属性。其他值,如display、float、font-family等无法过渡,因为没有可能的中间状态来显示。您将不得不退回使用JavaScript或尝试使用像opacity
这样的属性或应用解决方法,例如将height: 0
转换为height: 100px
。