3

我有一个这样的div：

.x{
   ...
}

还有一种最初隐藏的“子菜单”：

.x_submenu {
   ...
   display:none;
   ...
}

只有当用户在 x div 上时子菜单才可见：

div.x:hover .x_submenu {display:block; }

现在，我想通过事务或使可见性更“慢”的效果使其可见。有没有办法实现这个目标，可能是跨浏览器的解决方案？谢谢

4

3 回答 3

2

最好的选择是不透明度：

HTML：

<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;
}

见演示：http: //jsfiddle.net/wyKyT/

于 2013-02-25T20:36:55.437 回答
1

您将无法在“显示”属性上进行转换。您必须使用 'opacity' 属性来实现这一点。

相关 ：

吉姆杰弗斯解释说：

要解决此问题，请始终允许元素显示块，但通过调整以下任何方式隐藏元素：

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+ */
}
于 2013-02-25T20:34:33.853 回答
0

不，那里没有。CSS 转换仅适用于标量值，因此它们可以应用于处理尺寸、颜色（因为这些也以 rgb 值表示）、不透明度等的属性。其他值（如 display、float、font-family 等）无法转换因为没有可能的中间状态可以显示。您将不得不回退到使用 JavaScript 或尝试使用类似的属性opacity或应用类似height: 0的变通方法height: 100px

于 2013-02-25T20:34:10.397 回答