google chrome 的 javascript/css 转换 + z-index 问题答案

【问题标题】：javascript/css transform + z-index issue with google chromegoogle chrome 的 javascript/css 转换 + z-index 问题
【发布时间】：2016-02-02 21:50:57
【问题描述】：

google chrome 的一些问题，中心图片must be on top，但他们没有。

请尝试以下代码重复此问题：

<!DOCTYPE html>
<html>
<head>

<script>

function big_image(myelem) {
myelem.style.webkitTransform = 'scale(2.0)';
myelem.style.zIndex = '99';
}


function orig_image(myelem) {
myelem.style.webkitTransform = 'scale(1.0)';
myelem.style.zIndex = 'auto';
}

</script>


</head>
<body>

<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">

<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">

<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">

</body>
</html>

如何解决/克服它？谢谢。

【问题讨论】：

标签： javascript css google-chrome webkit transform

【解决方案1】：

z-index 和 transform 属性有一个错误。

避免它的最佳方法是重置转换属性onmouseout：

function big_image(myelem) {
    myelem.style.webkitTransform = 'scale(2.0)';
    myelem.style.zIndex = '2';
}


function orig_image(myelem) {
    myelem.style.webkitTransform = 'none';
    myelem.style.zIndex = '1';
}

在 Chrome/Opera 上经过测试并按预期工作。

【讨论】：