1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Background image flickers on hover

Problem

When hovering over links that have a background image applied, the image flickers in Internet Explorer.

Solution

A Javascript-based solution is available, and a workaround involving a second background image applied to the list item element containing the anchor tag.

Detailed description

When hovering over links that have background images applied, they often 'flicker' in Internet Explorer.  Many solutions have been proposed, but only two seem to be adopted widely.

As reported by Dan Popa (in this article), a very direct solution is to add some relatively unobtrusive Javascript to tweak the background image cache as such:

<script type="text/javascript">
try {
 document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>

This method appears to be a reasonably solid way to kill the problem, but requires Javascript be enabled in the client browser, of course.

A CSS-based method of combatting this bug which is reportedly still subject to sporadic failures is to apply the same background image to the <li> element that contains the affected link, which will essentially trick the eye into not seeing the flicker when a mouse hovers over the element.

Text ID: BACKGROUND_IMAGE_FLICKERS_ON_HOVER

---