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(;groupId=10180) no-repeat left top;" onmouseover="' url(/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180) no-repeat left top'" onmouseout="' url(/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top'"></div>


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:

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

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

Answered By – webdev-dan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published