Question

我有这样的div：

.x{
   ...
}

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

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

仅当用户在x div上时，子菜单才可见：

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

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

Answer 1

您将无法在'display'属性上进行转换。您必须使用'opacity'属性来实现此目的。

相关：

Jim Jeffers解释说：

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

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+ */
}

Answer 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/

Answer 3

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

如何添加转换/效果显示：块

3 个答案: