title: visibility CSS not working in IE8
body: <p>I've got some styling on an a tag so that some text appears only when rolling over. It only seems to be broken in IE8. It's for the three dots just below the homepage slider.</p>
  
  <p>The link:</p>
  
  <p><a href="http://www.escape2ski.com" rel="nofollow">http://www.escape2ski.com</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="threeDots"&gt;
  
     &lt;div class="dot first"&gt;
       &lt;p class="dotButton"&gt;&lt;a class="btn1" href="http://escape2ski.com/mountain-locations/"&gt;&lt;span&gt;Explore&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;Take a Tour&lt;/h2&gt;
    &lt;p&gt;Check out our in-depth listings to&lt;br&gt;see what we have to offer.&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="dot second"&gt;
    &lt;p class="dotButton"&gt;&lt;a class="btn2" href="http://escape2ski.com/ask-escape2ski/"&gt;&lt;span&gt;Ask Us&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;Let Us Help&lt;/h2&gt;
    &lt;p&gt;Got specific questions? Wonder if&lt;br&gt;your itinerary will really work?&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="dot third"&gt;
    &lt;p class="dotButton"&gt;&lt;a class="btn3" href="http://escape2ski.com/plans/membership-options/"&gt;&lt;span&gt;Join&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;h2&gt;Membership&lt;/h2&gt;
    &lt;p&gt;Get an all-access pass to every&lt;br&gt;info&amp;#8209;packed listing on our site.&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div style="clear:both;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.dotButton a span {
  visibility: hidden;
  }
  </code></pre>
  
  <p>Works in other browsers, on mobile... but not IE8. </p>
  
  <p>Any idea why?</p>
  
  <p>Thanks!
  Adam</p>
  
  <pre><code>.dotButton a:hover span {
  visibility: visible !important;
  }
  </code></pre>