我有以下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);
}
--
参见 jsFiddle 演示 --
注意:我的演示和CSS目前仅适用于webkit。
我正在谷歌浏览器版本23.0.1271.95 m上复制此问题
我在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);
}
似乎问题与负 z 值有关,因为将其更改为 translateZ(20px);
工作正常。如果您不想使用额外的div
,解决方法可能是将-webkit-transform-style: preserve-3d;
添加到body
。
这是一个更新的jsfiddle
希望对您有所帮助!
试试这个
我把它放到一个容器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>
'