Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas. Tablas CSS básicasse utilizan para organizar los datos tabulares en forma de filas y columnas. Podemos obtener fácilmente cualquier valor de tabla usando las filas y columnas. Tables Hover State se usa para oscurecer ligeramente las filas de la tabla cuando pasamos el mouse sobre las filas. En este artículo, discutiremos Tables Hover State en Foundation CSS.
Foundation CSS Tables Hover State Class:
- hover: esta clase se usa para oscurecer las filas al pasar el mouse.
Sintaxis:
<table class="hover"> </table>
Ejemplo 1: el siguiente código demuestra el estado de desplazamiento de las tablas CSS de Foundation con algo de contenido .
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green">GeeksforGeeks</h2> <h3>Foundation CSS Tables Hover State</h3> <table class="hover"> <thead> <tr> <th>GFG 1</th> <th>GFG 2</th> <th>GFG 3</th> </tr> </thead> <tbody> <tr> <td>Java</td> <td>Flutter</td> <td>Javascript</td> </tr> <tr> <td>Data Structure</td> <td>Coding</td> <td>GeeksforGeeks</td> </tr> <tr> <td>Python</td> <td>Web development</td> <td>GeeksforGeeks.org</td> </tr> </tbody> </table> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el estado de desplazamiento de las tablas CSS de Foundation con enlaces y contenido y el uso del atributo de ancho .
HTML
<!DOCTYPE html> <html> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color: green">GeeksforGeeks</h2> <h3>Foundation CSS Tables Hover State</h3> <table class="hover"> <thead> <tr> <th width="300">GFG 1</th> <th width="100">GFG 2</th> <th width="150">GFG 3</th> </tr> </thead> <tbody> <tr> <td><a href="#">https://www.geeksforgeeks.org/</a></td> <td>Java</td> <td>Dart</td> </tr> <tr> <td>Data Structure</td> <td>Coding</td> <td>GeeksforGeeks</td> </tr> <tr> <td>Python</td> <td><a href="#">GeeksforGeeks</a></td> <td>GeeksforGeeks.org</td> </tr> <tr> <td>Node.js</td> <td><a href="#">GFG</a></td> <td>Flutter</td> </tr> </tbody> </table> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/table.html#hover-state
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA