Question

我有一个非常简单的导航栏 - 水平，有一级垂直下拉 - 我用CSS实现了。当鼠标从下拉列表中退出时，我想添加一个短暂的延迟。环顾四周，看来可见性属性的CSS转换可能会让我接近。这是相关的CSS：

.navigation ul ul
{
   display: block;
   visibility: hidden;
  -webkit-transition: visibility .75s, linear;
  -moz-transition: visibility .75s, linear;
  /* etc... */
   transition: visibility .75s, linear;
}

.navigation ul li:hover > ul
{
  visibility: visible;
}

这完全符合我在Firefox（44.0.2），Chrome（48.0.2564.116）甚至Opera（35.0.2066.68）中的OS X所需要的。实际上，我很惊讶鼠标悬停没有延迟，但延迟适用于鼠标偏移。正是我想要的。

在Safari（9.0.3）中，它就像转换属性不存在一样 - 鼠标移开时下拉列表会立即消失。看看“检查元素”，我可以看到浏览器已经为相关的ul标签选择了转换属性（正确）。

我错过了什么，其他浏览器是否允许？ Safari没有正常行事吗？这不是一个大问题，但如果可能的话，我想让它到处工作。谢谢！

注意/编辑重复问题的可能性（CSS transition with visibility not working）：在我的情况下，除了Safari之外，我尝试过的所有情况下二进制可见性效果都能正常工作。另外，我已经弄明白了，我将在下面发布......

Answer 1

试试这个：

transition: visibility 0 linear .75s;

css可见性转换不适用于safari

1 个答案: