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

我知道我可以添加＆＃34;转换延迟＆＃34;但我不希望延迟悬停，但只有在我退出悬停状态时才会停止。

我更喜欢使用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;
}

示例小提琴：

http://jsfiddle.net/Sx2s5/

Answer 2

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

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

Answer 4

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

过渡悬停div css

4 个答案: