CSS轉換在鼠標移動時失去懸停狀態

我有以下HTML/CSS標記，它應該將div元素轉換爲:hover狀態。CSS轉換在鼠標移動時失去懸停狀態

當將鼠標懸停在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。

我複製這個問題上的谷歌瀏覽器版本23.0.1271.95米

來源

2012-12-07 Curt

不適合我，你使用什麼瀏覽器？ – Andy

@安迪谷歌瀏覽器。這段代碼目前只爲webkit創建 – Curt

對於我來說，只有當鼠標停留在頂部/左側邊緣時纔會發生，但顯然這是因爲元素正在進出鼠標區域。是你的問題還是我不能重新創建它？ – Andy

我有相同的使用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); 

}

來源

2012-12-07 15:06:40

如果容器中有超過1個模塊，這將無法工作？我不想爲每個「模塊」添加一個額外的'div'元素，只是爲了造型 – Curt

看來，這個問題得到了，因爲它更改爲translateZ(20px);與負Z值做工作正常。如果您不想使用額外的div，則可以將-webkit-transform-style: preserve-3d;添加到body。

這裏有一個更新的jsfiddle

希望幫助！

來源

2012-12-12 08:07:44

CSS轉換在鼠標移動時失去懸停狀態

回答

相關問題