Jquery Addclass不工作

我有这个代码,但它不起作用;我不知道为什么。我在所有浏览器(IE、chrome、firefox)中都尝试过。我想系统必须添加类,我尝试了chrome控制台来查看DOM。我看到了添加的类,但在chrome或其他浏览器中没有变化。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <style>
      #boton
      {
        width:200px;
        height:30px;
        border:1px solid;
        background-color:#cccccc;
      }


    </style>

    <style>
      .botoncla
      {
        background-color:#FF0000;
      }
    </style>


    <script>



    $(document).ready(function(){
      $("#boton").hover(function(){
        $(this).addClass("botoncla");
      }, function(){
        $(this).removeClass("botoncla");
     });
    });

    </script>
    </head>

    <body>
       <div id="boton">Hello</div>
    </body>

</html>

有人能测试一下吗?这对我不起作用。