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檢查添加上述在訪問您的網站，它解決了這一問題對我來說。