tabla

pmike · #1 (**permalink**) 08/07/2011, 11:18

Hola

Tengo una tabla:

<table border="0" cellspacing="0" cellpadding="10" width="625">
<tbody>
<tr>
<td class="">

en ella tengo varios contenidos que enlaza cada uno a otras paginas

pero deseo que al pasar el raton por estos <tr> me cambie el color por cada uno de ellos.

cual es el codigo Java script

nedyer · #2 (**permalink**) 08/07/2011, 13:11

creo que esto es lo que quieres pero se puede hacer con css muy facil

aqui el codigo html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="../CSS/Prueba2.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<table width="625" border="0" align="center" cellpadding="0" cellspacing="10">
  <tr id="numero1">
    <td><ul>
        <li><a href="Prueba2.html">contenido1</a></li>
      </ul></td>
    <td><ul>
        <li><a href="Prueba2.html">contenido2</a></li>
      </ul></td>
    <td><ul>
        <li><a href="Prueba2.html">contenido3</a></li>
      </ul></td>
  </tr>
  <tr id="numero2">
    <td><ul>
        <li><a href="Prueba2.html">contenido4</a></li>
      </ul></td>
    <td><ul>
        <li><a href="Prueba2.html">contenido5</a></li>
      </ul></td>
    <td><ul>
        <li><a href="Prueba2.html">contenido6</a></li>
      </ul></td>
  </tr>
  <tr id="numero3">
    <td><ul>
        <li><a href="Prueba2.html">contenido7</a></li>
      </ul></td>
    <td><ul>
        <li><a href="Prueba2.html">contenido8</a></li>
      </ul></td>
    <td><ul>
        <li><a href="Prueba2.html">contenido9</a></li>
      </ul></td>
  </tr>
</table>
</body>
</html>

el codigo css

Código CSS:

Ver original@charset "utf-8";
table {
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
}
ul {
    list-style-image: none;
    list-style-type: none;
    padding: 0px;
}
li {
    list-style-image: none;
    list-style-type: none;
}
a, avisited {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-family: Verdana, Geneva, sans-serif;
    text-transform: capitalize;
}
#numero1 {
    background-color: #FFF;
}
#numero1:hover {
    background-color: #FF0;
}
#numero2 {
    background-color: #FFF;
}
#numero2:hover {
    background-color: #03F;
}
#numero3 {
    background-color: #FFF;
}
#numero3:hover {
    background-color: #F00;
}

pmike · #3 (**permalink**) 08/07/2011, 13:54

Vale, gracias es una opcion muy interesante con css.

Ahora estaba mirando el framework de mootools, es muy interesante !!

Saludos