¿Cómo hacer un hover a la vez en dos casillas de una tabla?

[Dani392]

Hola,

Me gustaría hacer un hover que afecte a 2 casillas de una tabla, a la vez. ¿Me puedes ayudar?


Código:
<tr>
<td class="row">
<img src="img/8.gif">
</td>
<td class="row"
<p class="p1">The life in the steets</p>
<p class="p2">22h-23h</p>
</td>
</tr>

.row {
background-color: #FFFFFF;
border-bottom: 1px solid #C0C0C0;
padding-left: 5px;
}

.p1 {
margin: 0;
padding: 1px;
margin-top: 4px;
font-weight: bold;
color: #0F10CE;
}

.p2 {
margin: 0;
padding: 1px;
margin-bottom: 4px;
}

Este es el resultado del hover:
.activo {
background-color:#DEEFEE;
border-bottom: 1px solid #C0C0C0;
padding-left: 5px;
}

[derkenuke]

Hola Dani392.

¿Qué quieres decir? El ratón sólo puede estar encima de una casilla al mismo tiempo. Si sonsaco algo de tu mensaje, creo que quieres que el ratón estando en cualquiera de las dos casillas, se produzca un efecto sobre las dos casillas a la vez.

¿Es así?

[Dani392]

Sí exacto. Quiero que estando el reatón encima de una sola casilla, el efecto se produzca en las 2.

Un saludo,
Dani

[derkenuke]

Hola Dani392:

Perdona que no te haya vuelto a contestar, he estado liado estos días. Lo primero que tienes que hacer es concretar sobre qué dos celdas quieres que se produzca el efecto. Si vas a hacerlo en dos celdas concretas no hay más que ponerles un id y unos eventos onmouseover y onmouseout.

Improviso:

Código HTML:

<table>
<tr>
<td id="t1" onmouseover="colorear('t1','t2')" onmouseover="descolorear('t1','t2')">celda1</td>
<td id="t2" onmouseover="colorear('t1','t2')" onmouseover="descolorear('t1','t2')">celda2</td>
</tr>
</table> 

Y sólo necesitas un par de funciones (en el head por ejemplo, aunque daría igual).

Código PHP:

  function colorear(id1, id2) { 
  document.getElementById(id1).className = document.getElementById(id2).className = "activo"; 
} 
function descolorear(id1, id2) { 
  document.getElementById(id1).className = document.getElementById(id2).className = "row"; 
}  
   

Ésto te serviría indefinidamente para todas las celdas que quisieras, extendiendo el método. Aunque si quieres hacerlo 100 veces puede que sea pesado escribirlo así.



Un saludo.