Ir al contenido


Foto

Efecto hover en las tablas con css


  • Por favor identifícate para responder
9 respuestas en este tema

#1 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 29 agosto 2012 - 08:48

Hola buenos dias.

Queria saber como se hace el efecto que hace el phpmyadmin en las tablas.

Por ejemplo como hace que la fila cambie de color cuan el mouse pasa por encima de la fila y como vuelve al mismo color cuando se quita?
Tambien como hace que cambie de otro color cuando hace clic encima de la fila o de un checkbox?

Si alguien me pude ayudar estare agradecido...!!!!
  • 0

#2 felipe

felipe

    Advanced Member

  • Administrador
  • 3.283 mensajes
  • LocationColombia

Escrito 29 agosto 2012 - 12:49

Solo es añadir :hover al estilo del elemento en mención y allí el resto.


Saludos!
  • 0

#3 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 30 agosto 2012 - 09:30

Voy a probarlos!!!, yo te aviso si me funciona.

Excelente!!!!

Pero quiero saber como hacer para que cuando preciones en un checkbox se quede de un color, pero que ese color quede estatico, pero cuando el checkbox no este checkeado vuelva a la normalidad con la funcion hover

ejemplo:
  • 0

#4 felipe

felipe

    Advanced Member

  • Administrador
  • 3.283 mensajes
  • LocationColombia

Escrito 30 agosto 2012 - 10:22

Yo creo que aquí la cosa va más por el lado de JavaScript, puesto que tendrías que manejar una referencia para el elemento checkbox seleccionado.


Saludos!
  • 0

#5 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 30 agosto 2012 - 11:39

Y sabes como se haria????  :huh:
Es que lo que quiero hacer es:

Tener una tabla donde obtengo registros de la bases de datos y en la primera columna poner un check, que cuando se presiuones el check quede de un color estatico, pero cuando no se presiones tenga la funcionalidad :hover, eso es lo que quiero hacer. Sabes como hacerlo???????  :huh:
He estado investigando pero solo me aperecen ejemplos con :hover, no a como yo quiero....
  • 0

#6 felipe

felipe

    Advanced Member

  • Administrador
  • 3.283 mensajes
  • LocationColombia

Escrito 30 agosto 2012 - 12:55

¿Y porqué no pruebas con JQuery?, así te ahorras aplicar cada estilo a la tabla. Esta es de pago pero de seguro encontrarás más: http://www.trirand.net/default.aspx


Saludos!
  • 0

#7 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 30 agosto 2012 - 06:00

Hola!!!!, pero yo lo quiero gratutito. Quiero que lo que estoy creando sea gratuito todo la tecnologia que use... Por eso no ocupo nada de pago!!!!, pero gracias....

Seguiere investigando, pero si te das cuenta de como hacerlo, hazmelo saber... Te estare agradecido....
  • 0

#8 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 05 septiembre 2012 - 04:27

Hola, he buscado hacerca del efecto, pero no encuentro mucho... No se si el efecto se hace con javascript talvez me pueden orientar mejor.
  • 0

#9 felipe

felipe

    Advanced Member

  • Administrador
  • 3.283 mensajes
  • LocationColombia

Escrito 05 septiembre 2012 - 04:43

Pues si que es JavaScript, lo de colocar checkboxes sobre la tabla no es tan simple, por eso mi recomendación de buscar alguna que ahorrara algo de trabajo, el enlace anterior solo era de ejemplo, deberás buscar otros proyectos. http://sourceforge.n...grid javascript


Saludos!
  • 0

#10 porfi.dev

porfi.dev

    Advanced Member

  • Miembros
  • PipPipPip
  • 183 mensajes
  • LocationMy House @ México

Escrito 20 noviembre 2012 - 05:33

Con JavaScript seria algo asi...

Solo necesitas activar la funcion cada vez que marquen o desmarquen la funcion.

[js]
<script>
function verificar()
  {
  if (document.getElementById("check1").checked)
        document.getElementById('elementodiv').className='nuevoEstilo';
  }
</script>
</head>
<body>

<div id="elementodiv">
<form>
<input type="checkbox" id="check1">Do you like summer?
</form>
</div>

<button onclick="verificar()">Check Checkbox</button>

[/js]
  • 0




IP.Board spam blocked by CleanTalk.