过渡悬停div css答案

【问题标题】：Transition hover div css过渡悬停div css
【发布时间】：2014-08-19 15:53:06
【问题描述】：

我尝试在转换中添加延迟。

我有这些规则：

#mydiv{
  z-index : 100;
  top : 50%;
  left : 50%; 
  -webkit-transition:width 1s, height 1s, background-color 1s ,-webkit-transform 1s, margin-left 1s;
  transition:width 1s, height 1s, background-color 1s, transform 1s, margin-left 1s;
}

#mydiv:hover{
  width : 700px;
  margin-left : -350px;
  text-align : left;
}

我知道我可以添加“transition-delay”，但我不想在悬停时出现延迟，但只有在我退出悬停状态时才需要。

我更喜欢用 css 编码，而不是用 JS ...

有什么办法吗？

【问题讨论】：

你不能通过 CSS 做到这一点。你的 jQuery/JS。有一个事件“onmouseleave”，不要用 CSS 重新发明轮子。
这不是“重新发明轮子”，我不想用 JS 来做这些花样。我认为将 JS 用于可以在 CSS 中以更好的方式完成的事情是愚蠢的，而且性能更好！

标签： html css css-transitions transition

【解决方案1】：

在 #mydiv 上添加转换延迟，然后在 :hover 上覆盖它。

#mydiv{
    z-index : 100;
    top : 50%;
    left : 50%; 
    -webkit-transition:width 1s, height 1s, background-color 1s ,-webkit-transform 1s, margin-left 1s;
    transition:width 1s, height 1s, background-color 1s, transform 1s, margin-left 1s;
    transition-delay: .5s;
}
#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-delay: 0;
}

小提琴示例：

http://jsfiddle.net/Sx2s5/

【讨论】：

【解决方案2】：

我想你会发现这个答案有点用： CSS: opposite of :hover (on mouse leave)? CSS 没有“取消悬停”命令，但您可以在 a 上附加您想要的内容。

【讨论】：

【解决方案3】：

这里有一个没有转换延迟的更简单的方法：http://jsfiddle.net/v7BnQ/。

HTML：

<div id = "mydiv">Generic Division</div>

CSS：

body {
    overflow: hidden;
}

#mydiv{
    position: absolute;
    top : 50%;
    left : 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    -webkit-transition: all 2s;
    transition: all 2s;
}

#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-duration: 0s;
}

【讨论】：

【解决方案4】：

尝试在#mydiv 上设置此行：transition: all 0.5s linear; 当您退出链接的悬停状态时，您会感觉到一点延迟。

【讨论】：