• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

141
Vistas
Quiero mostrar un mensaje emergente mientras mi cursor se desplaza sobre una fila de la tabla. ¿Alguien puede dar algún resultado?
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover {background-color: coral;} </style> </head> <body> <h2>Hoverable Table</h2> <p>Move the mouse over the table rows to see the effect.</p> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> </table> </body> </html>

Quiero agregar un mensaje emergente cuando mi cursor se mueva sobre mi fila. Soy incapaz de lograr mi objetivo. Las diferentes filas generarán diferentes mensajes emergentes. Soy nuevo con CSS, por lo que no pude resolverlo por mí mismo.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

¿Algo así?

 table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover { background-color: coral; } tr .tooltip { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: relative; z-index: 1; } tr:hover .tooltip { visibility: visible; }
 <h2>Hoverable Table</h2> <p>Move the mouse over the table rows to see the effect.</p> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> <td class="tooltip">row2</span> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> <td class="tooltip">row2</span> </tr> </table>

Consulte la información sobre herramientas de CSS en W3Schools

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda