none
cambiar forecolor en botones usando jquery RRS feed

  • Pregunta

  • hola :

    tengo este codigo para cambiar la apariencia de un grupo de botones:

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src ="http://code.jquery.com/jquery-2.1.4.min.js"  type ="text/javascript"> </script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            #form1 {
                height: 181px;
                z-index: 1;
                left: 0px;
                top: 0px;
                ;
                width: 1292px;
            }


            .clasecss 
             {
              color: red ;
              font-weight:bold;
             }

         </style>

         <script type="text/javascript">
             $(function () {

                 $("[id*='Btherramientas']").mouseover(function () {
                    $(this).addClass("clasecss");
                 });

                 $("[id*='Btherramientas']").mouseleave(function () {
                     $(this).removeClass("clasecss");
                 });

                 $("[id*='Btconsulta']").mouseover(function () {

                     $(this).addClass("clasecss");
                     $("[id*='LbLusuario']").show(3000);

                 });

                 $("[id*='Btconsulta']").mouseleave(function () {
                     $(this).removeClass("clasecss");

                  });

                 $("[id*='Btchoferes']").mouseover(function () {

                     $(this).addClass("clasecss");

                 });

                 $("[id*='Btchoferes']").mouseleave(function () {
                     $(this).removeClass("clasecss");

                  });

                 $("[id*='Btcorrecciones']").mouseover(function () {

                     $(this).addClass("clasecss");

                 });

                 $("[id*='Btcorrecciones']").mouseleave(function () {
                     $(this).removeClass("clasecss");

                 });

                 $("[id*='Btrecaudaciones']").mouseover(function () {

                     $(this).addClass("clasecss");
                      $("[id*='LbLusuario']").show(3000);
                 });

                 $("[id*='Btrecaudaciones']").mouseleave(function () {
                     $(this).removeClass("clasecss");

                 });

                 $("[id*='Btayuda']").mouseover(function () {

                     $(this).addClass("clasecss");

                 });

                 $("[id*='Btayuda']").mouseleave(function () {
                     $(this).removeClass("clasecss");

                 });
             });
         </script>

    LO que me funciona bien es el cambio del tipo de fuente del estilo clasecss
    lo que no me hace es el cambio del color de la fuente del caption del boton .

    ya me fie en el codigo donde estan definidas las propiedades del boton ( dentro de la etiqueta body )
    y no tengo ahi definida la propiedad forecolor ( pense que el problema podia ser ese ), ademas lo probe con chrome y firefox y anda igual.


    agradeceria que me puedan ayudar 


                                                                                                                                                                
    • Editado ciclon25 domingo, 1 de noviembre de 2015 15:57
    domingo, 1 de noviembre de 2015 15:56

Respuestas

  • Puedes inicializar el estilo del botón en la carga:

       .clasecss 
              {
               color: red ;
               font-weight:bold;
              }
              
             .clasecss2 
              {
               color: white ;
               font-weight:normal ;
              }
          </style>
         
          <script type="text/javascript">
              $(function () {
                  $("[id*='Btherramientas']").addClass("clasecss2");
    
                  $("[id*='Btherramientas']").mouseover(function () {
                      $(this).addClass("clasecss");
                      $(this).removeClass("clasecss2");
                  });
                  
                  $("[id*='Btherramientas']").mouseleave(function () {
                      $(this).removeClass("clasecss");
                      $(this).addClass("clasecss2");
                  });
    
             
              });
          </script> 


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 3 de noviembre de 2015 8:03

Todas las respuestas

  • hola

    pero para cambiar el color de la fuente del boton solo defines el color en el css como lo estas realizando

    jsFiddle Live Demo

    How to set text color in submit button?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    lunes, 2 de noviembre de 2015 5:05
  • hola:

    antes que nada gracias por responder.

    logre en gran parte hacer lo que necesito poniendo este codigo ( el ejemplo lo mando para un boton solo )

       .clasecss 
             {
              color: red ;
              font-weight:bold;
             }
             
            .clasecss2 
             {
              color: white ;
              font-weight:normal ;
             }
         </style>
        
         <script type="text/javascript">
             $(function () {

                 $("[id*='Btherramientas']").mouseover(function () {
                     $(this).addClass("clasecss");
                     $(this).removeClass("clasecss2");
                 });
                 
                 $("[id*='Btherramientas']").mouseleave(function () {
                     $(this).removeClass("clasecss");
                     $(this).addClass("clasecss2");
                 });

            
             });
         </script>

    o sea , apoyo el puntero del mouse y salgo del boton y me respeta la css de turno.

    el unico inconveniente que tengo es qeu al iniciar el formulario no me aparece el texto del boton con el forecolor blanco 

    probe de poner en el load del webform :

     this.Btherramientas.ForeColor = System.Drawing.Color.White;

    lo que logro con esto es que no me cambie el forecolor cuando saco el puntero del boton ( siempre es wite )

    lo mismo si pongo  el forecolor del boton dentro de la etiqueta  <DIV>.

    en resumen: con el codigo puesto anteriormente , de la unica manera que anda ok es  a partir de apoyar el puntero del mouse sobre el boton .

    gracias 

    martes, 3 de noviembre de 2015 1:07
  • Puedes inicializar el estilo del botón en la carga:

       .clasecss 
              {
               color: red ;
               font-weight:bold;
              }
              
             .clasecss2 
              {
               color: white ;
               font-weight:normal ;
              }
          </style>
         
          <script type="text/javascript">
              $(function () {
                  $("[id*='Btherramientas']").addClass("clasecss2");
    
                  $("[id*='Btherramientas']").mouseover(function () {
                      $(this).addClass("clasecss");
                      $(this).removeClass("clasecss2");
                  });
                  
                  $("[id*='Btherramientas']").mouseleave(function () {
                      $(this).removeClass("clasecss");
                      $(this).addClass("clasecss2");
                  });
    
             
              });
          </script> 


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    martes, 3 de noviembre de 2015 8:03
  • hola : mil gracias , con esto ultimo lo pude solucionar . espero que tmb le sirva  a otra persona la solucion 
    miércoles, 4 de noviembre de 2015 0:05