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

Question

some issue with google chrome, center image must be on top , but they don't. 谷歌浏览器存在一些问题，中心图片必须位于顶部，但不是。

Please try following code to repeat this issue: 请尝试使用以下代码来重复此问题：

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

How to fix / overcome it? 如何解决/克服它？ Thanks. 谢谢。

Answer 1

There is a bug to do with z-index and transform properties. z-index和transform属性有一个错误。

The best way to avoid it, will be to reset transform property onmouseout : 避免这种情况的最好方法是在onmouseout上重置transform属性：

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';
}

Tested and works as expected on Chrome/Opera. 经过测试，可以在Chrome / Opera上正常运行。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-02 21:57:31

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-02 21:57:31

解决方案1
0 已采纳 2015-11-02 21:57:31