Home/ Questions/Q 8354791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T09:39:49+00:00

I have this code and it doesn’t work; I have no idea why. I

  • 0

I have this code and it doesn’t work; I have no idea why. I tried it in all browsers (IE, chrome, firefox). I suppose that the system must add the class and I tried the console of chrome to see the DOM. I saw the added class but no change in chrome or other browsers.

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

Can someone test this? It doesn’t work for me.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your jQuery code is working but your CSS does not work because the background-color of .botoncla does not overite background-color of #boton.

    Try with this :

    .botoncla
{
    background-color:#FF0000 !important;
}

    EDIT

    However in your case, !important is a hack … Maybe you should use .animate() instead : 

    $(this).animate({ backgroundColor: "FF0000" }, "slow");
    • 0