Javascript 鼠标悬停和鼠标悬停时图像闪烁

你好，我有一个由div标签组成的菜单。用户为每个菜单项选择一个图像，并在鼠标悬停在菜单上时应用一个附加图像（悬停状态）

问题是，在mouseenter和Mouseleve上，图像闪烁，用户体验不理想

请记住，用户上载每个菜单项的照片1为默认值，1为悬停状态

我如何摆脱闪烁

菜单项html：

<div class="help-context-box" style="background: url(http://domain.com/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top;" onmouseover="this.style.background=' url(/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180) no-repeat left top'" onmouseout="this.style.background=' url(/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top'"></div>

---

您应该同时显示两者-一个在另一个上。隐藏要在悬停时显示的内容，在鼠标悬停时显示，然后在鼠标离开时再次隐藏。
下面是一个应该有效的示例：

            <style>
            .help-context-box { position:relative; width:100px; height:100px; }
            .help-context-box img { position:absolute; top:0; left:0;  }
            .help-context-box img:last-child { display:none; }
            .help-context-box:hover img:last-child { display:inline-block; }
            </style>


            <div class="help-context-box">
                <img alt="" src="/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180">
                <img alt="" src="/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180">
            </div>

.help上下文框{位置：相对；宽度：100px；高度：100px；}
.help上下文框img{位置：绝对；顶部：0；左侧：0；}
.help上下文框img:last child{display:none；}
.help上下文框：悬停img:最后一个子项{显示：内联块；}

我可以想出一些解决方案：

如果您能够生成两幅图像的精灵，只需更改悬停时的背景位置，就可以消除加载闪烁

您可以镜像资源并坚持使用当前的解决方案

您可以使用两个标记而不是背景图像，并将它们放置在彼此上方，在将鼠标悬停在菜单项上时，只需隐藏默认（顶部）图像，即可显示已加载的悬停图像

---

如果您的div和图像大小相同，则还有另一个选项： 创建一个包含两个图像的新图像，一个覆盖另一个，并使用CSS完成所有操作

HTML:

---

你的

JavaScript

代码在哪里？没有额外的js代码，它在标签上内联

<div class="help-context-box"></div>

div.help-context-box {
    background: url(new_image_url) no-repeat left top;
}
div.help-context-box:hover {
    background-position: left bottom;
}