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更改为.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>

jQuery.hover无法在IE8中运行

2 个答案: