Image flickering on mouseover and mouseout

Question

Hello I have a menu that consists of div tags. The user selects an image for each menu item and one additional image to be applied when the mouse is over the menu (hover state).

The problem is that is on mouseenter and on mouseleave the image flickers and the user experience is not ideal.

Keep in mind that the user uploads photos for each menu item 1 for default and 1 for hover state.

How do i get rid of the flickering ?

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

There are a few solutions I can think of:

1. If you are able to produce a sprite of the two images, and simply change the background position on hover, that would remove the loading flicker.

2. You could prefetch image resources and stick with your current solution.

3. You could use two tags instead of background images and position them over each other, and simply hide the default (top) image when hovering over the menu item, revealing the already loaded hover image.

Answer 2

If your div and images are the same size there is another option: create a new image containing both images, one over the other and do everything with 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;
}

Answer 3

You should display both at the same time - one over another. Hide the one which you want to display on hover, show it on mouse hovering, and hide it again when mouse leave.
below an example which should be working:

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