Question

您好我有一个由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>

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

Answer 2

我能想到一些解决方案：

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

Answer 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;
}

鼠标悬停和鼠标移动时图像闪烁

3 个答案: