对我来说,缩放变换为什么会表现得如此奇怪是个奇迹。下图中显示的这两个元素具有完全相同的html代码,但缩放变换却会使某些元素失真...
这种奇怪的行为只出现在完成了拖放操作后,作用于被拖动元素及其周围的元素。
当鼠标悬停在元素上时,会添加Hover类... 如果我使用,效果是相同的。
我之所以询问,是因为在拖放结束后,元素仍然模糊不清。
这种奇怪的行为只出现在完成了拖放操作后,作用于被拖动元素及其周围的元素。
css代码如下:
div.KE_coverflowContainer {
vertical-align:top;
height:122px;
width:90px;
padding:5px;
text-align:center;
display:inline-block;
margin:10px 5px 5px 0px;
background:#e4e4e4;
position:relative;
cursor:default;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #bababa;
}
div.KE_coverflowContainerHover {
-moz-transform: scale(2) translate(0px,29px);
-o-transform: scale(2) translate(0px,29px);
-webkit-transform: scale(2) translate(0px,29px);
transform: scale(2) translate(0px,29px);
z-index:1000;
cursor:move;
margin-top:0px;
border:1px solid #bababa;
-moz-box-shadow: 6px 6px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 6px 6px 5px rgba(0,0,0,0.3);
box-shadow: 6px 6px 5px rgba(0,0,0,0.3);
}
当鼠标悬停在元素上时,会添加Hover类... 如果我使用,效果是相同的。
div.KE_coverflowContainer:hover
不是通过JavaScript添加类(因为在IE中:hover无法在除<a>元素以外的其他元素上工作,但mouseenter和mouseleave可以,我更喜欢JS解决方案)。
有谁知道如何解决这个问题?
是否有其他方法重新绘制元素,而不是使用以下代码?
$.fn.redrawElement = function(){
return this.each(function(index, element){
var n = document.createTextNode(' ');
$(element).appendChild(n);
(function(){n.parentNode.removeChild(n)}).defer();
});
}
我之所以询问,是因为在拖放结束后,元素仍然模糊不清。
编辑:
我知道模糊的原因:
如果在Webkit中,一个元素被缩放并最终停在了<canvas>
标签上方,它会变得模糊/像素化!不确定原因,但会向Webkit Dev Team发送错误报告。
无论如何,感谢你的帮助 :-)