title: css hover in IE 8
body: <p>Cant get this to work in IE, but works perfect Firefox, is this due to the way i have written my CSS?</p>
  
  <p>Thanks</p>
  
  <p>R</p>
  
  <p><b>CSS</b></p>
  
  <pre><code>.theme-default .nivo-directionNav a {
      display:block;
      width:26px;
      height:23px;
      background:  url(../images/arrows-3.png) no-repeat;
      text-indent:-9999px;
      border:0;
  }
  
  .theme-default .nivo-directionNav a:hover {
      display:block;
      width:26px;
      height:23px;
      background: url(../images/arrows-over-1.png) no-repeat;
      text-indent:-9999px;
      border:0;
  }
  </code></pre>
  
  <p><b>Javascript</b></p>
  
  <pre><code>//Add Direction nav
  if(settings.directionNav){ 
      slider.append(
          '&lt;div class="nivo-directionNav"&gt;
              &lt;a class="nivo-prevNav"&gt;'+ settings.prevText +'&lt;/a&gt;
              &lt;a class="nivo-nextNav"&gt;'+ settings.nextText +'&lt;/a&gt;
          &lt;/div&gt;'
      ); 
      //Hide Direction nav 
      if(settings.directionNavHide){ 
          $('.nivo-directionNav', slider).hide();
          slider.hover( function(){ 
              $('.nivo-directionNav', slider).show();
          },
          function(){ 
              $('.nivo-directionNav', slider).hide(); 
          }); 
      }
  </code></pre>