CSS transform losing hover state on mouse move

jadbamydasy

New Member
I have the following HTML/CSS mark-up which should transform the \[code\]div\[/code\] element on \[code\]:hover\[/code\] state.When hovering over the \[code\]div\[/code\] element, the \[code\]:hover\[/code\] styles are added correctly. However on mouse move, these styles are lost, until the mouse stops moving.Why is this happening?HTML:\[code\]<div class="module">sdfsdf<br><br><img src="http://placekitten.com/100/100" /></div>?\[/code\]CSS:\[code\].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);}?\[/code\]-- See jsFiddle Demo --Note: My demo and CSS is for webkit only at the moment.I'm replicating this issue on Google Chrome Version 23.0.1271.95 m
 
Back
Top