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

asitudela · #1 (**permalink**) 14/01/2005, 10:46

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?

asitudela · #2 (**permalink**) 14/01/2005, 13:12

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?

JavierB · #3 (**permalink**) 14/01/2005, 14:00

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,

julio2k · #4 (**permalink**) 14/01/2005, 14:00

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

angsanchez · #5 (**permalink**) 14/01/2005, 15:04

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>

Matthew_182 · #6 (**permalink**) 14/01/2005, 15:42

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>

asitudela · #7 (**permalink**) 14/01/2005, 18:32

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!!!

Durgeoble · #8 (**permalink**) 14/01/2005, 18:48

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;
}

Matthew_182 · #9 (**permalink**) 14/01/2005, 19:15

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

Durgeoble · #10 (**permalink**) 14/01/2005, 19:54

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.

Matthew_182 · #11 (**permalink**) 14/01/2005, 20:13

da lo mismo la cosa es que funciona nunca me e distingido por el orden pero voy a seguir tus 2 consejos

JavierB · #12 (**permalink**) 15/01/2005, 03:50

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,

tunait · #13 (**permalink**) 15/01/2005, 04:42

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...

tunait · #14 (**permalink**) 15/01/2005, 04:59

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

Matthew_182 · #15 (**permalink**) 15/01/2005, 09:32

Perdón tunait pero que hace display:block;

tunait · #16 (**permalink**) 15/01/2005, 14:07

Cita:

Iniciado por Matthew_182

Perdón tunait pero que hace display:block;

Pruébalo

Matthew_182 · #17 (**permalink**) 15/01/2005, 15:41

jlrodriguez · #18 (**permalink**) 28/01/2005, 12:08

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