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版本57.0.2987.133上进行了这些测试。

如果有人看到了什么问题，很高兴告诉我。

Answer 1

罪魁祸首是您的.text-over-image div。 由于它绝对位于图像上方，因此每当您将鼠标放在图像上方时，鼠标事件就会转移到该div而不是图像上。 一个简单的解决方法是将其添加到您的CSS：

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

我刚刚在访问您的网站时通过chrome inspector添加了上述内容，它为我解决了这个问题。