Foros del Web » Creando para Internet » CSS »

Cambiar color de fondo a una fila al entrar con el raton en una celda de esa fila

 Estas en el tema de Cambiar color de fondo a una fila al entrar con el raton en una celda de esa fila en el foro de CSS en Foros del Web. Hola tengo una tabla con 10 filas y 5 columnas Quier oque cuando el raton pasa por calquier celda de una fila se cambie de ...
  #1 (permalink)  
Antiguo 05/10/2006, 07:35
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 22 años, 6 meses
Puntos: 0
Cambiar color de fondo a una fila al entrar con el raton en una celda de esa fila
Hola tengo una tabla con 10 filas y 5 columnas

Quier oque cuando el raton pasa por calquier celda de una fila se cambie de color toda la fila.

Para ello he aplicado n estilo al tr pero lo que me hace es cambiar el color a la celda sobre la que está el raton, no a la fila entera
  #2 (permalink)  
Antiguo 05/10/2006, 08:21
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 20 años, 7 meses
Puntos: 5
Cita:
Iniciado por Laika Ver Mensaje
Hola tengo una tabla con 10 filas y 5 columnas

Quier oque cuando el raton pasa por calquier celda de una fila se cambie de color toda la fila.

Para ello he aplicado n estilo al tr pero lo que me hace es cambiar el color a la celda sobre la que está el raton, no a la fila entera
Puedes poner el codigo necesario, para poder ayudarte
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 05/10/2006, 09:29
Avatar de izar  
Fecha de Ingreso: enero-2004
Mensajes: 519
Antigüedad: 20 años, 3 meses
Puntos: 1
Código: 

<html>

<head>
<STYLE type="text/css">
tr {
background-color:black;
color:white;
font-family:verdana;
font-weight:normal;
font-size:8pt;
}
tr.onmouse { background-color: orange; color: #FFFFFF;font-family:verdana;font-weight:normal;font-size:8pt;cursor:hand }
tr.offmouse { background-color: #000000; color: #FFFFFF;font-family:verdana;font-weight:normal;font-size:8pt;} 
</STYLE>
</head>
<body>
<table width="770px" border="1" cellpadding="0" cellspacing="0">
        <tr onmouseover="className='onmouse';"  onmouseout="className='offmouse';">
          <td>Inicio</td><td>Noticias</td><td>Galer&iacute;a</td>
        </tr>
     </table> 
</body>
</html>
Espero que te sirva. Saludos
  #4 (permalink)  
Antiguo 05/10/2006, 09:42
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 22 años, 6 meses
Puntos: 0
Firefox se ve ok, IE no se ve
Ya lo consegui pero....

¿por qué en firefox se ve y en iexplorer ¿no?
  #5 (permalink)  
Antiguo 05/10/2006, 09:46
Avatar de izar  
Fecha de Ingreso: enero-2004
Mensajes: 519
Antigüedad: 20 años, 3 meses
Puntos: 1
que codigo usaste? El codigo que posteé funciona en IE.
  #6 (permalink)  
Antiguo 05/10/2006, 09:57
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 22 años, 6 meses
Puntos: 0
  1. El 2º <tr class=filas_tabla_clientes"> es el que hace que cada fila cambie de color en su clase :hover pero no se ve en IE.
  2. También en IE los bordes se ven más gordos que en Firefox.

Haber si pueden solucionarme estos 2 temas.

Cita:

<table width="990" border="0" align="center" cellpadding="0" cellspacing="0" class="tabla_clientes">

<tr class="filas_tabla_clientes">

<th width="156" height="25" class="tit_filas_tabla_clientes">Nombre</span></th>
<td width="232" class="tit_filas_tabla_clientes"><center>
<strong> Apellidos </strong>
</center></td>
<td width="140" class="tit_filas_tabla_clientes"><center>
<strong> Fecha de Alta </strong>
</center></td>
<td width="124" class="tit_filas_tabla_clientes"><center>
<strong> Tel&eacute;fono </strong>
</center></td>
<td width="176" class="tit_filas_tabla_clientes"><center>
<strong> Poblaci&oacute;n </strong>
</center></td>
<td width="151" class="provincia_tit_filas_tabla_clientes"><center >
<strong> Provincia </strong>
</center></td>
</tr>
<%do while not rs.EOF %>

<tr class="filas_tabla_clientes">

<th width="156" height="25" class="celdas_clientes"><center>
<a href="ficha_cliente.asp?id_cliente=<%=rs("id_clien te")%>&amp;id_franquiciado=<%=Request.QueryString( "id_franquiciado")%> class="celdas_clientes"">
<%response.write(rs("nombre_cliente"))%>
</a>
</center> </th>
<td width="232" class="celdas_clientes"><center>
<%response.write(rs("apellidos_cliente"))%>
</center> </td>
<td width="140" class="celdas_clientes"><center>
<%response.write(rs("fecha_alta"))%>
</center> </td>
<td width="124"class="celdas_clientes"><center>
<%response.write(rs("telefono_cliente"))%>
</center> </td>
<td width="176"class="celdas_clientes"><center>
<%response.write(rs("poblacion_cliente"))%>
</center> </td>
<td width="151" class="provincia_clientes"><center>
<%response.write(rs("provincia_cliente"))%>
</center> </td>
</tr>
<% rs.MoveNext

Loop
%>
</table>
Los estilos:

Cita:
.links_activos {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #03488D;
text-decoration: none;
font-weight: bold;
}

a.links_activos:link { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #03488D;
text-decoration: none;
font-weight: bold;}

a.links_activos:visited { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #03488D;
text-decoration: none;
font-weight: bold;
}

a.links_activos:hover { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #860205;
text-decoration: none;
font-weight: bold;
}

a.links_activos:active { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #03488D;
text-decoration: none;
font-weight: bold;
}

.links_noactivos {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #999999;
text-decoration: none;
font-weight: bold;
}

.tabla_clientes {
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}

.filas_tabla_clientes {
background-color: #C1DAFF;
border-right: 1px solid #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #042571;
}

.filas_tabla_clientes:hover {

background-color: #FFFFCC;
}

.tit_filas_tabla_clientes {
background-color: #BFC1C4;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.provincia_tit_filas_tabla_clientes {
background-color: #BFC1C4;
border-bottom: 1px solid #000000;
}


.celdas_clientes {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-right-width: thin;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
text-decoration: none;
text-align: center;
}

.provincia_clientes {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
text-decoration: none;
text-align: center;
}

.cabecera_clientes {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
text-decoration: none;
text-align: center;
}
  #7 (permalink)  
Antiguo 06/10/2006, 03:09
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 22 años, 6 meses
Puntos: 0
gracias Izar con tu código ya lo conseguí y se ve bien en IE
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:29.