I'm currently in the process of designing a website, and I have implemented some image hover effects that reveal elements within the image when you hover over it. These effects are functioning correctly on Chrome, Safari, and Firefox; however, they are not working on Internet Explorer. This is due to the fact that the :hover code in IE only applies to the a:hover element. Is there a way to resolve this issue either through a JavaScript solution or by adding an anchor tag to the entire div so that the effects work consistently across all browsers? Below is the code snippet I am using:
<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>