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

这是因为您正在重复使用 ID，并且它们应该是唯一的，请将您的元素更改为使用 class="caio"，并将选择器从 #caio 更改为code> 到 .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 ');
  });
});