Foros del Web - Ver Mensaje Individual - Que falla en este código jquery no lo entiendo

nakome · #5 (**permalink**) 04/08/2012, 07:36

Es que el codigo si que funciona pero el background no te lo cambia por que ya esta y necesitas primero quitarlo.
Otra solucion con addClass que puede que te valga que lo que hace es remplazar la clase y añadir otra y luego al reves y asi tambien puedes reutilizar la clase.

Código HTML:

Ver original<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;
    }
        
    .botoncla { background-color:#FF0000;}   
    .gris{ background-color:grey; }
        
        
    </style>
    
    <script> 
            $(document).ready(function(){
                $("#boton").hover(function(){
                
                $(this)
                    .removeClass("gris")
                    .addClass("botoncla");
                
                }, function(){
                
                $(this)
                    .removeClass("botoncla")
                    .addClass("gris");
                });
            });
    </script>
    </head>
    <body>
    
    <div id="boton" class="gris" >Hello</div>
    
    </body>
</html>