CSS3转换在div或图像上效果不佳

Question

我尝试使用Javascript来实现CSS3转换，以便在鼠标未结束时灰显图像<img>并在鼠标位于其上时用颜色呈现。

这里是我的代码片段：

// Create container for image of simulation 
var containerImage = document.createElement('div'); 
containerImage.className = 'wrap'; 
elementBodyContent.appendChild(containerImage); 

// Create text for imageElement 
var textElement = document.createElement('div'); 
textElement.className = 'text-over-image'; 
textElement.innerHTML = 'Click to raise simulation'; 
containerImage.appendChild(textElement); 

// Create image of simulation 
var imageElement = document.createElement('img'); 
imageElement.className = 'contrast'; 
imageElement.width = 700; 
imageElement.height = 381; 
imageElement.style.cursor = 'pointer' 
imageElement.cursor = 'hand'; 
imageElement.src = 'http://ghujisl.com/Scene.png'; 
imageElement.onload = function() { 
     containerImage.insertBefore(imageElement, textElement); 
}; 

及相关的CSS：

img.contrast 
    { 
    filter: contrast(0.3); 
      -webkit-filter: contrast(0.3); 
      -moz-filter: contrast(0.3); 
      -o-filter: contrast(0.3); 
      -ms-filter: contrast(0.3); 

      -webkit-transition: all 0.3s ease-in-out; 
      -moz-transition: all 0.3s ease-in-out; 
      -o-transition: all 0.3s ease-in-out; 
      -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    } 
    img.contrast:hover 
    { 
    filter: contrast(1); 
      -webkit-filter: contrast(1); 
      -moz-filter: contrast(1); 
      -o-filter: contrast(1); 
      -ms-filter: contrast(1); 

      -webkit-transform: scale(1.1); 
      -moz-transform: scale(1.1); 
      -o-transform: scale(1.1); 
    transform: scale(1.1); 
    } 
    .wrap { 
    height:auto; 
    margin: auto; 
    text-align:center; 
    position:relative; 
    } 
    .text-over-image { 
     position: absolute; 
     margin: auto; 
     cursor: pointer; 
     top: 0; 
     left:0; 
     right:0; 
     bottom:0; 
     color:#fff; 
     height:100px; 
     } 

但不幸的是，转变工作不正常。一旦我在图像上，有时会使用contrast filter，有时候不会。此外，当鼠标停留在图像上时，如果我停下并重新开始移动鼠标，总是在图像上方，起始图像渲染返回（我再次获得灰色图像，而鼠标仍在图像上）。

您可以在[下一个链接] [1]上测试这种奇怪的行为。

我在Firefox 52和Chrome Version 57.0.2987.133上做过这些测试。

如果有人可以看到有什么问题，最好给我看看。

Answer 1

罪魁祸首是你的.text-over-image股利。由于它绝对位于图像上方，只要将鼠标放在图像上，鼠标事件就会转移到该图像而不是图像。 一个简单的办法就是把它添加到你的CSS：

.text-over-image{ 
    pointer-events : none; 
    ... 
} 

我只是通过Chrome检查添加上述在访问您的网站，它解决了这一问题对我来说。