Home/ Questions/Q 5964863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:30:36+00:00

I’m working on a website design, and I have some image hover effects that

  • 0

I’m working on a website design, and I have some image hover effects that involve elements on the image showing up when you hover over the image. It works fine on Chome, Safari and FF, but It doesn’t work on IE, because on IE, the :hover code ONLY works on a:hover. Is there any way to either supply a javascript fix for this, or add an anchor to the whole div so it works on every browser? Here’s my code:

    <html>
<head>
<style>
body { background: #FFF; }

#postimage {
width: 500px;
height: 335px;
}

#topbar {
width: 500px;
background: rgba(0, 0, 0, 0.75);
height: 50px;
position: absolute;
z-index: 999;
}

#bottombar {
width: 500px;
background: rgba(0, 0, 0, 0.75);
height: 50px;
position: absolute;
z-index: 999;
margin-top: -50px;
}

#postimage div#bottombar{
    display: none;
}

#postimage:hover div#bottombar {
    display: inline;
}

#postimage div#topbar{
    display: none;
}

#postimage:hover div#topbar {
    display: inline;
}

</style>
</head>
<body>
<div id="postimage">
<div id="topbar">1</div>
<img src="http://28.media.tumblr.com/tumblr_lltiujAaV81qghzpno1_500.jpg" border="0">
<div id="bottombar">2</div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This problem with IE’s hover only working on <a> elements is only an issue with IE6 and lower.

    My first advice is to simply drop support for IE6. It really does have far too many issues, and far too low market share to make it worthwhile supporting these days. (the market share for IE6 was low already, but has dropped off a cliff in the last six months or so). If your boss or client insists on you supporting it, you should tell them up front that it will double the cost of development and maintenance.

    However, I accept that some sites have circumstances that require them to continue supporting IE6, so if that’s you, you’ll be pleased to know that there is a very easy fix for the hover bug.

    There is a CSS hack called Whatever:hover. Just download the file on that page, link it into your stylesheet as instructed, and hover will work everywhere in IE6. Magic.

    • 0