javascript/css转换+谷歌chrome的z索引问题

javascript/css transform + z-index issue with google chrome

本文关键字：索引 问题 chrome 谷歌 css 转换 javascript      更新时间：2023-09-26

谷歌chrome的一些问题，中心图像必须在顶部，但它们没有。

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

<!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>

如何解决/克服它？谢谢

z索引和转换属性有一个错误。

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

相关文章：