Image flickering on mouseover and mouseout

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

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>

Advertisement

Answer