[jQuery] .hover not working in IE8

Question

Hi, I have this css code that works fine in Chrome and Firefox but not in IE8:

 <script type="text/javascript">
   $(function(){
     $("#button").button();
     $("#radioset").buttonset();

     $('#ciao,#dialog_link, ul#icons li ').hover(
       function() { $(this).addClass('ui-state-hover ui-corner-left '); }, 
       function() { $(this).removeClass('ui-state-hover ');}
     ); 
   });
</script>

And this html code:

    <a href="http://www.myhome"&gt;
   <label id="ciao" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-corner-right ui-state-active" >
   <span id="ciao" class="ui-button-text ui-corner-left ui-corner-right">Home page</span></label></a>
   </a>

   <a href="register.php">
   <label id="ciao" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-corner-right ui-state-active" >
   <span id="ciao" class="ui-button-text ui-corner-left ui-corner-right">Put your logo!</span></label></img>
   </a>

   <a href="faqs.html">
   <label id="ciao" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-corner-right ui-state-active" >
   <span id="ciao" class="ui-button-text ui-corner-left ui-corner-right">FAQs</span></label></img>
   </a>

   <a href="logos.html">
   <label id="ciao" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-corner-right ui-state-active" >
   <span id="ciao" class="ui-button-text ui-corner-left ui-corner-right">Logos</span></label></img>
   </a>

   <a href="contact.html">
   <label id="ciao" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-corner-right ui-state-active" >
   <span id="ciao" class="ui-button-text ui-corner-left ui-corner-right">Contact us</span></label>
   </a>

Why it is not working in IE8??

Thanks a lot.

Answer 1

It's because you're re-using IDs, and they should be uniue, change your elements to use class="caio" instead, and change your selector from #caio to .caio, like this:

$(function(){ 
  $("#button").button(); 
  $("#radioset").buttonset();
  $('.ciao, #dialog_link, ul#icons li').hover(function() { 
    $(this).addClass('ui-state-hover ui-corner-left '); 
  }, function() { 
    $(this).removeClass('ui-state-hover ');
  });
});

Answer 2

<label onClick="document.location.href='http://en.theitalianbrand.com/contact.html';" class="ciao ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-corner-right ui-state-active" >
<span class="ciao ui-button-text ui-corner-left ui-corner-right">Contact us</span></label>