CSS变换鼠标移动时失去悬停状态答案

【问题标题】：CSS transform losing hover state on mouse moveCSS变换鼠标移动时失去悬停状态
【发布时间】：2012-11-25 18:41:11
【问题描述】：

我有以下 HTML/CSS 标记，它应该转换 :hover 状态上的 div 元素。

将鼠标悬停在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 上复制此问题

【问题讨论】：

不适合我，你用的是什么浏览器？
@Andy Google Chrome。到目前为止，此代码仅针对 webkit 创建
对于 chrome 上的我来说，它只发生在鼠标向下/左上边缘时，但显然这是因为元素正在移入/移出鼠标区域。这是你的问题还是我不能重新创建它？
哪个版本的chrome，我也可以
我看不到任何使用 Chromium 20 的转换。

标签： html css hover css-transforms

【解决方案1】：

试试这个

我把它放到一个容器 div 中。将悬停应用到容器并将 .module 上的指针事件设置为无。删除了不必要的东西。如果需要，您仍然可以将 -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>

【讨论】：

【解决方案2】：

似乎问题与负 z 值有关，因为将其更改为 translateZ(20px); 工作正常。如果您不想使用额外的div，则可以将-webkit-transform-style: preserve-3d; 添加到body 中。

这是更新后的jsfiddle

希望对您有所帮助！

【讨论】：

【解决方案3】：

我在使用 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);

}

【讨论】：

如果容器中有多个模块，这将不起作用吗？而且我不想为每个 module 添加额外的 div 元素只是为了样式