鼠标悬停和鼠标悬停时图像闪烁答案

【问题标题】：Image flickering on mouseover and mouseout鼠标悬停和鼠标悬停时图像闪烁
【发布时间】：2014-03-05 09:10:22
【问题描述】：

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

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

请记住，用户为每个菜单项上传照片 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>

【问题讨论】：

您的JavaScript 代码在哪里？
标签内没有额外的js代码

标签： javascript jquery html css

【解决方案1】：

您应该同时显示两者 - 一个在另一个之上。隐藏你想在悬停时显示的那个，在鼠标悬停时显示，在鼠标离开时再次隐藏。
下面是一个应该可以工作的例子：

            <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>

【讨论】：

【解决方案2】：

我能想到几个解决方案：

如果您能够生成两个图像的精灵，并且只需更改悬停时的背景位置，就可以消除加载闪烁。
您可以prefetch 图像资源并坚持您当前的解决方案。
您可以使用两个标签而不是背景图像并将它们放置在彼此之上，当悬停在菜单项上时只需隐藏默认（顶部）图像，从而显示已经加载的悬停图像。

【讨论】：

【解决方案3】：

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

HTML：

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

CSS：

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

【讨论】：