Foros del Web » Creando para Internet » CSS »

cambiar el color de la celda cuando pases el ratón por encima

Estas en el tema de cambiar el color de la celda cuando pases el ratón por encima en el foro de CSS en Foros del Web. me gustaría q cuando pase por encima de mi link que está dentro de una celda, la celda se pondría en otro color, pero no ...
  #1 (permalink)  
Antiguo 14/01/2005, 10:46
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 7 meses
Puntos: 4
cambiar el color de la celda cuando pases el ratón por encima

me gustaría q cuando pase por encima de mi link que está dentro de una celda, la celda se pondría en otro color, pero no sé como, me ayudan?

Última edición por asitudela; 14/01/2005 a las 12:00
  #2 (permalink)  
Antiguo 14/01/2005, 13:12
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 7 meses
Puntos: 4
cambiar el color de la celda cuando pases por encima, y q sea un link

me gustaría q cuando pase por encima de mi link que está dentro de una celda, la celda se pondría en otro color, pero no sé como, me ayudan?
  #3 (permalink)  
Antiguo 14/01/2005, 14:00
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola asitudela

Prueba con esto:
Código HTML:
<a href="mipagina.html"
onmouseover="this.parentNode.style.background='#0f0'"
onmouseout="this.parentNode.style.background='#f00'">Enlace</a> 
Saludos,
  #4 (permalink)  
Antiguo 14/01/2005, 14:00
Avatar de julio2k  
Fecha de Ingreso: abril-2004
Ubicación: Colombia
Mensajes: 22
Antigüedad: 13 años, 7 meses
Puntos: 0
Hola Asitudela en realidad no puedes cambiar el color de la celda con css al pasar el mouse sobre el link(eso lo puedes hacer con Java script como te propone JavierB).
pero si tienes una celda
Código HTML:
<td class="rollover">
  texto de la celda
</td> 
la opcion

Código:
<style>
  td.rollover:hover{
   background-color:red;
  }
</style>
te funciona al pasar el mouse sobre la celda asi no exista ningún link, A se me olvidaba, para variar no funciona en ie.
Y como supongo que esto no te agrada mucho podrias pensar que para una tabla
Código HTML:
 <table border id="mitabla">
    <tr>
      <td><a href="index.php">Aves</a></td>
      <td><a href="index.php">Peces</a></td>
      <td><a href="index.php">Reptiles</a></td>
    </tr>
  </table> 
puedes agregarle un css para ampliar el tamaño del link igual a la celda
Código:
<style>
  #mitabla a{
    display:block;
    background-color:green;
    text-decoration:none;
    height:100%;
  }
  #mitabla a:hover{
    background-color:blue;
    color:white;
  }
</style>

Aunque si lo que buscas es crear un menu, recuerda que las tablas se deben usar para datos
si vas a realizar un menu debes cambiar el css de los links hasta lograr la apariencia que tu quieres
pej.

si tienes un html como:
Código HTML:
<div id="botonera">
     <a href="index.php">Aves</a>
     <a href="index.php">Peces</a>
     <a href="index.php">Reptiles</a>
</div> 
puedes usar un css como:
Código:
div#botonera{
 border:2px groove black;
 width:120px;
}
div#botonera a{
 display:block;
 background-color:#bbe;
 border:1px solid gray;
 text-decoration:none;
 color:black;
 padding:2px;

}
div#botonera a:hover{
 background-color:#bee;
 border:1px outset silver;
 text-decoration:none;
 color:blue;
}
Espero que te sirva de ayuda
__________________
julio2k

La herencia que dejas en este mundo son tus obras

:pensando:

Última edición por julio2k; 14/01/2005 a las 15:01
  #5 (permalink)  
Antiguo 14/01/2005, 15:04
 
Fecha de Ingreso: octubre-2004
Ubicación: España
Mensajes: 894
Antigüedad: 13 años, 1 mes
Puntos: 3
Hola
Debe de haber un modo con los parentNode, pero de eso no entiendo. Prueba así:
Código HTML:
<html>
<head>
<style type="text/css">
.resalta { background-color:#FF6600; }
</style>
</head>

<body>
<table border=1>
<tr>
<td>A</td>
<td id="celda1">Este es un 
<a href="www.algo.es" 
onMouseOver="document.getElementById('celda1').className='resalta'"
onMouseOut="document.getElementById('celda1').className=''"
>enlace</a>
</td>
</tr></table>
</body>
</html> 
__________________
Angel :cool:
  #6 (permalink)  
Antiguo 14/01/2005, 15:42
 
Fecha de Ingreso: diciembre-2004
Ubicación: En mi ksa
Mensajes: 267
Antigüedad: 13 años
Puntos: 0
Cita:
Iniciado por asitudela
me gustaría q cuando pase por encima de mi link que está dentro de una celda, la celda se pondría en otro color, pero no sé como, me ayudan?
Espero q te sirva:
Código HTML:
<html>
  <head>
    <style type="text/css">
     a:link { text-decoration:none;
     background-color:#ffffff;
     color:#000000; 
     }
     a:hover{
     text-decoration:underline;
     background-color:#FF6600;
     color:white;
     font-weight:bold; 
     }
    </style>
  </head>
  <body>
    <table border=1 cellpadding="1" cellspacing="0">
        <tr>
    <td class="lala" id="celda1"><div align="center">
      <a href="#">aaaaaaaaaaaaaaa</a></div></td>
        </tr>
        <tr> 
    <td width="105" class="lala" id="celda1"><div align="center">
      <a href="#">aaaaaaaaaaaaaaa</a></div></td>
       </tr>
    </table>
  </body>
</html> 
__________________
--------------------------------------------------
[::Matthew Beyer::]
MaEsTrOsWeB
Chile
--------------------------------------------------

Última edición por Matthew_182; 14/01/2005 a las 20:42
  #7 (permalink)  
Antiguo 14/01/2005, 18:32
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 7 meses
Puntos: 4
Muchas gracias a los dos.

Aunque al final he hecho lo de javierB quería agradecerte julio2k el valioso tiempo que has usado para poner toda esa explicación.

Por cierto javierB he quitado el parentNode que aunq no sé que hace exactamente, a mi me cambiaba todas las celdas de la fila a la vez, lo he quitado y funciona correctamente..


Código HTML:
<td width="7%" onmouseover="this.style.background='F7F7F7'" onmouseout="this.style.background='#FFFFFF'">S</td> 
Muchas Gracias!!!
  #8 (permalink)  
Antiguo 14/01/2005, 18:48
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 8 meses
Puntos: 2
Prueba esto:
Código HTML:
<table>
<tr><td>
<a href="urlalinkar" alt="" class="cambiafondo"><div class="todacelda">Texto o imagen del link</div></a>
</td></tr>
</table> 
Y en el archivo css
Código:
.cambiafondo:hover {
          background-color: red;
 }
.todacelda {
          width: 100%;
          heigth: 100%;
          margin: 0px 0px 0px 0px;
}
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #9 (permalink)  
Antiguo 14/01/2005, 19:15
 
Fecha de Ingreso: diciembre-2004
Ubicación: En mi ksa
Mensajes: 267
Antigüedad: 13 años
Puntos: 0
esto es a lo que te refieres?
Código HTML:
<html>
    <head>
         <style type="text/css">
         a:link { 
         text-decoration:none;
         background-color:#ffffff;
         color:#000000; 
         }
         a:hover { 
         text-decoration:underline;
         background-color:#FF6600;
         color:white;font-weight:bold;
         }
        </style>
    </head>
  <body>
       <table border=1 cellpadding="1" cellspacing="0">
                <tr>
            <td class="lala" id="celda1"><div align="center">
            <a href="#">aaaaaaaaaaaaaaa</a></div></td>
                 </tr>
                 <tr> 
             <td width="105" class="lala" id="celda1"><div align="center">
             <a href="#">aaaaaaaaaaaaaaa</a></div></td>
               </tr>
        </table>
  </body>
</html> 
saludos
__________________
--------------------------------------------------
[::Matthew Beyer::]
MaEsTrOsWeB
Chile
--------------------------------------------------

Última edición por Matthew_182; 14/01/2005 a las 20:35
  #10 (permalink)  
Antiguo 14/01/2005, 19:54
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 8 meses
Puntos: 2
No, a esto

Código HTML:
<html>
     <head>
     <style type="text/css">
     a:link {
     text-decoration: none;
    background-color: #ffffff;
    color:#000000;
     }
     a:hover {
     text-decoration: underline;
    background-color: #FF6600;
    color: white;
    font-weight: bold; 
    }
    .todacelda {
              width: 100%;
              heigth: 100%;
              margin: 0px 0px 0px 0px;
    }
    </style>
      </head>
     <body>
     <table border=1 cellpadding="1" cellspacing="0">
  <tr>
      <td class="lala" id="celda1">
              <a href="#"><div class="todacelda">aaaaaaaaaaaaaaa</div></a>
              </td>
      </tr>
   <tr> 
      <td width="105" class="lala" id="celda1">
              <a href="#"><div class="todacelda" >aaaaaaaaaaaaaaa</div></a>
              </td>
            </tr>
       </table>
     </body>
     </html> 
Por cierto cuida la sintaxis, todas las propiedades css deben terminar con ";" incluida la ultima, tambien seria bueno que cuidaras el estilo haciendo saltos de linea y diferenciando elementos pues te ayudara sobremanera a localizar fallos y datos conforme crezca la pagina.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #11 (permalink)  
Antiguo 14/01/2005, 20:13
 
Fecha de Ingreso: diciembre-2004
Ubicación: En mi ksa
Mensajes: 267
Antigüedad: 13 años
Puntos: 0
da lo mismo la cosa es que funciona nunca me e distingido por el orden pero voy a seguir tus 2 consejos
__________________
--------------------------------------------------
[::Matthew Beyer::]
MaEsTrOsWeB
Chile
--------------------------------------------------

Última edición por Matthew_182; 14/01/2005 a las 20:22
  #12 (permalink)  
Antiguo 15/01/2005, 03:50
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Cita:
Iniciado por asitudela
Por cierto javierB he quitado el parentNode que aunq no sé que hace exactamente, a mi me cambiaba todas las celdas de la fila a la vez, lo he quitado y funciona correctamente..
Si, es porque entendí que querías que al pasar por encima del enlace (por eso puse las funciones en la etiqueta <a>) se iluminara la celda en la que estaba contenido el enlace (parentNode), pero si lo pones directamente en la etiqueta <td> está claro que no hace falta.

Me alegro de que finalmente lo hayas resuelto. Saludos,
  #13 (permalink)  
Antiguo 15/01/2005, 04:42
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Añádele esto a lo que te propuesto Matthew_182


Código:
a:hover{
     text-decoration:underline;
     background-color:#FF6600;
     color:white;
     font-weight:bold; 
     display:block;
     }
... y nos vamos al foro de CSS

movido desde (x)html

Saludos...
  #14 (permalink)  
Antiguo 15/01/2005, 04:59
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mira que se dice y se repite y hay un anuncio que dice Leer antes antes de preguntar en este foro http://www.forosdelweb.com/announcement.php?f=4

No dupliquen sus preguntas, por favor. Sólo obtienen respuestas duplicadas y hacen perder el tiempo a quien trata de ayudarles.

Temas unidos

saludos
  #15 (permalink)  
Antiguo 15/01/2005, 09:32
 
Fecha de Ingreso: diciembre-2004
Ubicación: En mi ksa
Mensajes: 267
Antigüedad: 13 años
Puntos: 0
Perdón tunait pero que hace display:block;
__________________
--------------------------------------------------
[::Matthew Beyer::]
MaEsTrOsWeB
Chile
--------------------------------------------------
  #16 (permalink)  
Antiguo 15/01/2005, 14:07
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Cita:
Iniciado por Matthew_182
Perdón tunait pero que hace display:block;
Pruébalo
  #17 (permalink)  
Antiguo 15/01/2005, 15:41
 
Fecha de Ingreso: diciembre-2004
Ubicación: En mi ksa
Mensajes: 267
Antigüedad: 13 años
Puntos: 0
__________________
--------------------------------------------------
[::Matthew Beyer::]
MaEsTrOsWeB
Chile
--------------------------------------------------
  #18 (permalink)  
Antiguo 28/01/2005, 12:08
 
Fecha de Ingreso: diciembre-2004
Mensajes: 4
Antigüedad: 13 años
Puntos: 0
Cambiar el color de la celda al pasar el mouse

Saludos, está muy interesante todo esto. EStoy arreglando la interfaz gráfica de mi sistema, y quisiera obtener algo como lo q se aprecia en la página de ibm: www.ibm.com
donde hay un conjunto de links dentro de una tabla y toda las tabla cambia el color de fondo. Me ayudan a conseguirlo.

Gracias de antemano.

José Luis
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




La zona horaria es GMT -6. Ahora son las 10:34.