I am using CSS3 with an rgba alpha opacity hover to display text over an image when the user hovers.
Works fine in chrome, firefox and safari but when trying in internet explorer (9) it just shows the image and hovering does nothing.
Check out the code here:
div {
position: absolute;
top: 0px;
left: 0px;
display: table;
width: 600px;
height: 396px;
text-align: center;
background: #000;
}
span {
display: table-cell;
vertical-align: middle;
background: rgba(255, 255, 255, 0.72);
visibility: hidden;
opacity: 0;
color: #000;
}
div:hover span {
visibility: visible;
opacity: 1;
text-align: right;
}<div>
<span>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="20%" rowspan="5"> </td>
<td width="60%">- 0</td>
<td width="20%" rowspan="5" align="right">
<a href="#" target="frame">
<img src="http://placehold.it/71x50/f00" alt=" " width="71" height="50" border="0">
</a>
</td>
</tr>
<tr>
<td>- 1</td>
</tr>
<tr>
<td>- 2</td>
</tr>
<tr>
<td>- 3</td>
</tr>
<tr>
<td>- 4</td>
</tr>
</table>
</span>
</div>
The demo works in Internet Explorer 9. The issue may be that you are viewing the page in an older document mode, thus reducing support for things like
:hoveron non-link elements, andrgbacolor.Press F12 to open up your Developer Tools and check the document mode from there. Alternatively, you can also log the value of
document.documentModeto your console output as well. You should expect Internet Explorer 9 to be in IE 9's document mode, as opposed to something earlier.The ensure that your document loads in Standards Mode to begin with (which in IE 9 is the 9 Document Mode), start your document with the HTML5 doctype:
Nothing should come before this in your document.
From then on, adhere closely to the HTML Specification. As an example of one deviation from the spec, you are placing a
tablewithin aspan. The<span>element is meant to hold only phrasing content, such as<a>,<strong>,<em>, etc.