Question

谷歌浏览器的一些问题，中心图像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>

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

Answer 1

与z-index和转换属性有关的错误。

避免它的最佳方法是重置转换属性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上测试并按预期工作。

谷歌浏览器的javascript / css转换+ z-index问题

1 个答案: