Javascript 用js交叉溶解图像 我试图设置一个菜单，其中每个子菜单项在悬停时在同一个框中显示一个图像； var i = 0; while (i < imageS.length) { /* select menu items */ imageS[i].onmouseover = function() { /* image source (menu item) mouseover */ imageD.style.display = "block"; /* show container */ var ops = this.getElementsByTagName("img")[0].src; /* find new image url */ imageD.style.background = "url(" + ops + ") no-repeat left"; /* set new image in the background */ imageD.style.backgroundSize = "cover"; /* set background size */ setTimeout(function() { /* imageD.getElementsByTagName("img")[0].src = ops; /* set new image in the img tag */ imageD.getElementsByTagName("img")[0].style.transition = "opacity 0.5s linear"; /* fade in transition */ imageD.getElementsByTagName("img")[0].style.opacity = "1"; /* fade in */ }, 500); } imageS[i].onmouseout = function() { /* image source (menu item) mouseover */ imageD.getElementsByTagName("img")[0].style.transition = "opacity 0.5s linear"; /* fade out transition */ imageD.getElementsByTagName("img")[0].style.opacity = "0"; /* fade out */ imageD.style.display = "none"; /* hide container */ }; i++; } var i=0； 而（i

您可以在此处看到它的功能：

过渡结束时会有一个小flickr，有人知道为什么吗？

---

提前感谢=）

您正在运行css动画并调用display:none同时在同一元素上运行。这可能是造成这件艺术品的原因。由于将“不透明度”设置为0，因此不需要同时设置“显示：无”。当您删除该行时，它是否会更改

imageS[i].onmouseout = function() { /* image source (menu item) mouseover */
    imageD.getElementsByTagName("img")[0].style.transition = "opacity 0.5s linear"; /* fade out transition */
    imageD.getElementsByTagName("img")[0].style.opacity = "0"; /* fade out */
    // REMOVE :: imageD.style.display = "none"; /* hide container */
  };

谢谢你的回答=）我已经试着删除了这一行，但是图像容器仍然可见，这是因为我使用了背景和img来获得交叉融合过渡。不幸的是，背景不透明度不存在！