jQuery.hover не работает в IE8

Question

Этот Javascript отлично работает в Chrome и Firefox, но не в 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> 

И этот HTML:

<a href="http://www.myhome"> 
    <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> 

Почему он не работает в IE8 ??

Большое спасибо.

Answer 1

Это потому, что вы повторно использовать идентификаторы, и они должны быть уникальными, изменить элементы, чтобы использовать class="caio" вместо этого, и изменить селектор из #caio в .caio, как это:

$(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>