Menú en tabla con hover y link
Publicado por Adicionado (1 intervención) el 21/01/2020 18:23:28
Hola buenas,
Estoy intentando crear un menú con tablas. La idea es que al pasar el ratón por arriba de un menú o te encuentras en dicha sección del menú se oscurezca toda la celda.
El código que tengo actualmente es el siguiente:
Las variables son simplemente textos predefinidos del sitio web. Los Icon son imágenes.
¿Alguna idea de cómo podría hacer lo que necesito?
Estoy intentando crear un menú con tablas. La idea es que al pasar el ratón por arriba de un menú o te encuentras en dicha sección del menú se oscurezca toda la celda.
El código que tengo actualmente es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table id="menu_pvt" style="width: 100%; margin-bottom: 10px; text-align: center; background-color: #2C353B; border-radius: 5px; color: #efefef; border-collapse: collapse;">
<tr>
<td style="width: 25%; vertical-align: middle; padding: 10px 10px 0px 10px; border-right: 1px solid #000;"><ion-icon size="large" name="archive" style="margin-right: 3px;"></ion-icon></td>
<td style="width: 25%; vertical-align: middle; padding: 10px 10px 0px 10px; border-right: 1px solid #000;"><ion-icon size="large" name="paper-plane" style="margin-right: 3px;"></ion-icon></td>
<td style="width: 25%; vertical-align: middle; padding: 10px 10px 0px 10px; border-right: 1px solid #000;"><ion-icon size="large" name="swap" style="margin-right: 3px;"></ion-icon></td>
<td style="width: 25%; vertical-align: middle; padding: 10px 10px 0px 10px;"><ion-icon size="large" name="bookmark" style="margin-right: 3px;"></ion-icon></td>
</tr>
<tr>
<td style="width: 25%; vertical-align: middle; padding: 0px 10px 10px 10px; border-right: 1px solid #000;">{INBOX}</td>
<td style="width: 25%; vertical-align: middle; padding: 0px 10px 10px 10px; border-right: 1px solid #000;">{SENTBOX}</td>
<td style="width: 25%; vertical-align: middle; padding: 0px 10px 10px 10px; border-right: 1px solid #000;">{OUTBOX}</td>
<td style="width: 25%; vertical-align: middle; padding: 0px 10px 10px 10px;">{SAVEBOX}</td>
</tr>
</table>
Las variables son simplemente textos predefinidos del sitio web. Los Icon son imágenes.
¿Alguna idea de cómo podría hacer lo que necesito?
Valora esta pregunta
0
