[CSS转换在鼠标移动时失去悬停状态

Question

我有以下HTML / CSS标记，应将div状态转换为:hover元素。

将鼠标悬停在div元素上时，将正确添加:hover样式。但是，在鼠标移动时，这些样式会丢失，直到鼠标停止移动为止。

为什么会这样？

---

HTML：

<div class="module">
sdfsdf
<br><br>
<img src="http://placekitten.com/100/100" />
</div>​

CSS：

.module
{
    width:200px;
    height:200px;
    background:blue;
    margin:10px;
    color:#fff;
    padding:10px;
}

.module:hover
{
    -webkit-transform-origin:50% 50%;
    -webkit-transition:-webkit-transform 0.08s;
    -webkit-font-smoothing:antialiased;
    -webkit-transform:perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(-20px);

}​

---

-- See jsFiddle Demo --

注意：目前，我的演示和CSS仅适用于Webkit。

我正在Google Chrome版本23.0.1271.95 m上复制此问题

Answer 1

我使用Chrome浏览器也一样。可以解决此问题：

<div class="container">
<div class="module">
    <img src="http://placekitten.com/100/100"> 
</div>
</div>

和css

.module
{
width:200px;
height:200px;
background:blue;
color:#fff;
padding:10px;
}

.container:hover .module
{
-webkit-transform-origin:50% 50%;
-webkit-transition:-webkit-transform 0.08s;
-webkit-font-smoothing:antialiased;
-webkit-transform:perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(-20px);

}​​​​​​​​​​​​​​​​​​​

Answer 2

似乎与负z值有关，因为将其更改为translateZ(20px);可以正常工作。解决方法是，如果不想使用额外的div，可以在-webkit-transform-style: preserve-3d;上添加body。

这里是更新的jsfiddle

希望有帮助！

Answer 3

尝试一下

我将其放入容器div中。将鼠标悬停在容器上，并将.module上的指针事件设置为none。删除了不必要的东西。如果需要，您仍然可以将-webkit-添加到其中的某些内容中。我似乎没有必要。

注意，我将过渡移到了悬停代码之外`

* {
    box-sizing: border-box;
}

.container {
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid black;
    perspective: 800px;
}

.module {
    width: 200px;
    height: 200px;
    background: blue;
    color: #fff;
    padding: 10px;
    pointer-events: none; 
    transition: transform 0.08s;
}

.container:hover .module {
    transform: translateZ(-20px);
}

        <div class="container">
            <div class="module">
                sdfsdf
                <br />
                <br />
                <img src="http://placekitten.com/100/100" />
            </div>​
        </div>

`