title: Issue with :active and :hover states in IE and Firefox
body: <p>I have a problem with a css triggered overlay. The solution is working somewhat fine in Chrome, but has slight issues in Firefox and being wholly unusable in Internet Explorer.</p>
  
  <p>In Firefox the problem is with :active. I have to hold down the mouse button for 1-2 to make the overlay stay, while in IE it doesn't show at all.</p>
  
  <p>My HTML markup is thus:</p>
  
  <pre><code>&lt;a href="#" id="aftermath" title="Mark Nielsen's 3D computer animation project devekoped at Aalborg Media College"&gt;                
                  &lt;article class="three columns"&gt; 
                      &lt;h1&gt;
                          Aftermath
                      &lt;/h1&gt;                                       
                      &lt;img src="images/aftermath-video.jpg"  class="resize" alt="3D computer animation project by Mark Nielsen" /&gt;                    
                  &lt;/article&gt;                                
              &lt;/a&gt;
  
  &lt;div class="infobox" id="aftermathinfo"&gt;
                  &lt;article&gt;
                      &lt;h1&gt;
                          Aftermath
                      &lt;/h1&gt;
                      &lt;p class="truncate"&gt;This was the result of the "free project" from my stay at Media College Aalborg. Sebastian Baasch and I modelled this from a picture of an old army Jeep and did everything else ourselves. Besides modelling the Jeep and various objects in the landscape I also did all 2D graphics, editing and post effects.&lt;/p&gt;
                      &lt;p&gt;&lt;a href="posts/aftermath-video.aspx" class="important-link" title="Mark Nielsen's 3D computer animation project devekoped at Aalborg Media College"&gt;See and read about the computer animation project here&lt;/a&gt;&lt;/p&gt;
                      &lt;p&gt;&amp;nbsp&lt;/p&gt;
                      &lt;p&gt;&amp;nbsp&lt;/p&gt;
                      &lt;p&gt;&lt;a href="portfolio.aspx" title="Go look at Mark Nielsen's projects, including web page design, graphic design, programming and much more..."&gt;Close this window&lt;/a&gt;&lt;/p&gt;
                  &lt;/article&gt;                
              &lt;/div&gt;
  </code></pre>
  
  <p>and the corresponding CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.infobox {
      position:fixed;
      top:0;
      left:0;
      /*margin-left:-300px;*/
      width:100%;
      height:100%;
      background: rgba(0, 0, 0,.75);
      visibility:hidden;
      z-index:9999;
  }
  
      .infobox article {
          text-align:center;
          margin-top:10%;
          padding:5%;
          padding-bottom:20%;
          width:100%;
          background-color:#292929;
          opacity:0.95;
      }
  
          .infobox article p {
              text-align:center;
          }
  
          .infobox article h1 {
              border:none;
              margin:2% 0;
              padding:0;
              font-size:1.8em;
          }
  
      .infobox a.important-link {
          font-size:1.5em;
          /*text-transform:uppercase;
          font-style:normal;*/
      }
  
  .infobox:hover {
      visibility:visible;
  }
  
  
  
  #aftermath:active + #aftermathinfo {
      visibility:visible;
  }
  </code></pre>
  
  <p>Live version can be seen here: <a href="http://balder.ucn.dk/1020613/portfolio.aspx" rel="nofollow">http://balder.ucn.dk/1020613/portfolio.aspx</a></p>