Que falla en este código jquery no lo entiendo

fr1974 · #1 (**permalink**) 03/08/2012, 16:39

Aqui les dejo mi código , no da error en ninguna consola , en google chrome y otros navegadores utilizo una consola de depuración de errores y nada no funciona peor en las consolas online si , no entiendo nada señores de verdad , si alguien se le ocurre que puede ocurrir pro favor me diga algo , porqeu ya ni se que más mirar :

Cita:

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

<script>

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

</script>

</head>

<body>

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

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

</body>
</html>

Gracias a todos !!!

nakome · #2 (**permalink**) 03/08/2012, 18:16

Hola yo no soy muy entendido pero puedes probar con esto haber si te vale igual.

Código HTML:

Ver original$(document).ready(function(){
   $("#boton").hover(function(){
       $(this).css('background-color','#FF0000');
    }, function(){
       $(this).css('background-color','#cccccc');
     });
});

ipraetoriux · #3 (**permalink**) 03/08/2012, 23:55

...aca el problema que tienes es en CSS no en jQuery...cuando agregas la clase "botoncla" el background-color no se modifica, porque tiene el background-color de #boton, lo que debes hacer es simplemente agregar !important al background de la clase

Código CSS:

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

y te sugiero acomodar tu codigo, css dentro del head, y scripts antes de cerrar el body

fr1974 · #4 (**permalink**) 04/08/2012, 05:59

Jquery es el que agrega la clase y la anima no es tema de css , jquery con addclass debe animar el color cambiandolo por la clase indicada con un efecto de transicion , pero no funciona , en cuanto al uso de hover si funciona pero quiero que el cambio de color sea animado con una transicion por eso de usar la funcion addclass , saludos

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>

ipraetoriux · #6 (**permalink**) 04/08/2012, 13:21

Cita:

Iniciado por fr1974

Jquery es el que agrega la clase y la anima no es tema de css , jquery con addclass debe animar el color cambiandolo por la clase indicada con un efecto de transicion , pero no funciona , en cuanto al uso de hover si funciona pero quiero que el cambio de color sea animado con una transicion por eso de usar la funcion addclass , saludos

...equivocado, aca el problema que tiene el amigo, es justamente CSS, el jQUery le funciona perfecto, pero el está agregando dos estilos al mismo elemento, uno con el id y otro agregando el class...CSS le da mayor prioridad al background-color del id que el de class, por eso no le cambia...soluciones o modifica el background en el div, o le da !important en la class para que css le de mayor prioridad

ipraetoriux · #7 (**permalink**) 04/08/2012, 13:23

Cita:

Iniciado por nakome

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>

exactanmente el jquery funciona,como le puse mas arriba, simplemente agregando !important lo soluciona...la otra forma es arrgelando el codigo y haciendo las cosas bien...pero bueno