Internet Explorer hover/rgba/opacity/css3 compatibility

171 views Asked by At

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:

http://jsfiddle.net/b16pow50/

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">&nbsp;</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>

1

There are 1 answers

4
Sampson On BEST ANSWER

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 :hover on non-link elements, and rgba color.

Press F12 to open up your Developer Tools and check the document mode from there. Alternatively, you can also log the value of document.documentMode to your console output as well. You should expect Internet Explorer 9 to be in IE 9's document mode, as opposed to something earlier.

enter image description here

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:

<!DOCTYPE html>

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 table within a span. The <span> element is meant to hold only phrasing content, such as <a>, <strong>, <em>, etc.