html - 过渡悬停div css

Question

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

我有这些规则:

#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 ...

有什么解决办法吗？

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

示例 fiddle :

http://jsfiddle.net/Sx2s5/