Javascript onMouseCenter和onmouseleave事件像地狱一样闪烁

我有一个中间有一个菱形细胞的网页，里面有一张动画图片。当我将鼠标悬停在图像上方时，动画的标题图像必须以指定的不透明度显示。当鼠标不在图像上方时，标题图像不得显示。我使用了

onmouseinter（）

和

onmouseleave（）

事件。但是，当我将鼠标悬停在图像上方时，标题图像会闪烁/闪烁。有谁能帮我，使标题图像不闪烁吗

函数名（）{
var x=document.getElementById（'titleimage'）；
x、 style.display='none'；
}
函数displayName（）{
var x=document.getElementById（'titleimage'）；
x、 style.display='block'；
x、 style.opacity='0.5'；
}

img{
宽度：300px；
高度：300px；
}
.集装箱{
背景颜色：灰色；
背景尺寸：封面；
宽度：300px；
高度：300px；
位置：绝对位置；
最高：20%；
左：40%；
变换：旋转（-45度）；
}

---

有很多方法可以实现您想要的功能，但使用CSS是目前为止最简单的方法，并且还提供了其他显示选项，如转换

这里有一个例子

document.getElementById（“悬停图像”）.addEventListener（“单击”，函数（）{
警报（“您单击了图像”）；
});
#主图像，
#悬停图像{
左：10px；
位置：绝对位置；
顶部：10px；
}
#悬停图像{
不透明度：0；
过渡：不透明度1s；
}
#悬停图像：悬停{
不透明度：1；
}

鼠标输入上显示的图像覆盖了处理鼠标输入事件的图像，因此触发鼠标离开事件，这意味着鼠标再次在第一个图像上触发鼠标输入，依此类推。。你能解释清楚你想要它做什么吗？我知道你想让图像显示，但它什么时候应该消失？当鼠标不在图像上时。这就像在图像上悬停时显示一些文本。仅在这里，我在鼠标悬停时显示一个图像，当鼠标不在图像上时图像消失。在这种情况下，只需更改图像源，这比有两个图像容易得多。或者，将mouseleave事件处理程序放在第二个映像上。谢谢它的帮助，但是我在主映像上有一个onclick事件，它现在不工作。可能吗@Archer？主图像在显示悬停图像时隐藏，因此onclick事件必须附加到悬停图像。这应该“管用”。或者，您可以将主图像放在悬停图像的前面，并在鼠标悬停时使其淡出。这似乎有点倒退，但它会做你想做的。无论哪种方法都可以。我在图像上添加了一个单击处理程序的示例。我不知道为什么这对堆栈溢出有效，但对我的代码无效。我将类更改为ids，并将同一行粘贴到脚本标记中。有什么问题吗？在onclick事件中，当我使用您建议的更改运行我的页面时，没有弹出警报