Question

我试图拥有一个包含子菜单的菜单，这就是我目前所拥有的（它比这更复杂），我想使用转换属性：< /强>

.product:hover #button-option { visibility: visible !important; } #button-option { visibility: hidden; -webkit-transition: visibility .2s; transition: visibility .2s; }

这是我的jsfiddle：http://jsfiddle.net/4bsmq2kg/

我希望我的子菜单稍晚出现，或者像花一些时间一样出现在这里：http://www.vmware.com

我怎么能让这个工作？我尝试了几件事，但没有一件工作。谢谢！
编辑：我实际上很愚蠢，并没有意识到代码中存在错误，但我仍然无法找到我真正想要找到的内容。

Answer 1

可见性将转换，但仅限于二进制（开/关）方式。也许您希望在opacity上进行转换（因为visibility需要关闭以防止对元素进行鼠标检测）。您可能也不需要/想要!important。此外，除非您定位旧浏览器版本，否则您不需要webkit-transition前缀属性（如果您要指定它，则应为-webkit-transition）。

Answer 2

可见性不会很好。为此，您可以更好地设置不透明度：

#button-option {
    opacity: 0; 
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out;
}
.product:hover #button-option {
    opacity: 1;
}

如果您希望菜单从左向右滑动，则还可以设置位置动画：

#button-option {
    left: -300px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out;
}
.product:hover #button-option {
    left: 0px;
}

您可以查看更多详细信息here。

Answer 3

最后，我混淆了不透明度，谢谢大家！还要试试你的一些建议，晚安！

可见性属性的转换

3 个答案: