html - 鼠标悬停时的 CSS3 过渡

Question

我创造了这个小提琴。我相信你会看到我的问题。

jsfiddle.net/vnbS3/

弹出的框决定它不会在鼠标移出时做同样的事情。我已经尝试了很多东西，但我认为这不是因为 z-index。

我认为这是由于 .background 上的过渡，因为我不得不设置一个过渡延迟来阻止它搞砸。但是，延迟不适用于鼠标移出。

Answer 1

摆脱您在后台的轻松过渡，这会导致它出现奇怪的弹出延迟。

小提琴：http: //jsfiddle.net/vnbS3/3/

.background {
    position: absolute;
    z-index: 1;
    width:100%;
    height:100%;
    border-radius: 999px;
    overflow: hidden;
}

Answer 2

只需将!important标签添加到您的.backgrounddiv 的overflow:hidden属性

这里

http://jsfiddle.net/vnbS3/4/