Javascript CSS3转换在div或image上工作不正常
我尝试使用Javascript实现CSS3转换,以便在鼠标未移动到图像上方时使图像变灰,并在鼠标位于图像上方时使用颜色进行渲染 以下是我的代码片段: 与CSS相关的:Javascript CSS3转换在div或image上工作不正常,javascript,css,Javascript,Css,我尝试使用Javascript实现CSS3转换,以便在鼠标未移动到图像上方时使图像变灰,并在鼠标位于图像上方时使用颜色进行渲染 以下是我的代码片段: 与CSS相关的: // Create container for image of simulation var containerImage = document.createElement('div'); containerImage.className = 'wrap'; elementBodyContent.appendChild(con
// 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);
};
但不幸的是,这些转换无法正常工作。一旦我在图像上,有时应用对比度过滤器,有时不应用
此外,当鼠标位于图像上方时,如果我停止并重新启动移动鼠标,始终位于图像上方,则开始的图像渲染将返回(我再次获得灰色图像,而鼠标仍在图像上)
您可以在[以下链接][1]上测试这种奇怪的行为
我在Firefox52和Chrome版本57.0.2987.133上做了这些测试
如果有人能看到哪里出了问题,最好让我看看。罪魁祸首是你的
.text over image
div。由于它绝对位于你的图像上方,每当你将鼠标放在它上面时,鼠标事件都会转移到该div而不是图像。
一个简单的修复方法是将此添加到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;
}
我只是在访问你的网站时通过chrome inspector添加了上述内容,它为我解决了这个问题
.text-over-image{
pointer-events : none;
...
}