image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

iluminar fila con css

Volver al foro | Responder | Añadir nuevo tema


De: fraxagp
Fecha: 08/09/2006
Mensaje:

Hola a todos quería saber la forma de iluminar una fila de una tabla al pasar el puntero del ratón por cualquier celda de la fila. He conseguido aplicarle un estilo a:hover al div insertado en una celda, y me funciona con esa celda en concreto, pero querría que se me extendiese a las otras celdas de la fila. Estoy clavado en ese punto...... Gracias


Quizás le interese
De: ZeroKilled
Util para: 15 personas

Fecha: 08/09/2006
Mensaje:

Se puede hacer con javascript, pero con css seria mucho mas facil de implementarlo y de manejarlo. pero aun asi, al fin y al cabo posiblemente lo termines haciendo en javascript. las ultimas versiones de css permite atribuirle el pseudo clase :hover a cualquier elemento, pero sucede que no todos los navegadores lo permiten. tomemos como ejemplo IE y Firefox:

tr{
background:#FFF;
}

tr:hover{
background:#999;
}

como posiblemente te imaginaras, IE no entiende la pseudo clase :hover solamente para los enlaces. una gran pena. como antes mencione, tambien se puede lograr con javascript, pero veras que es algo bastante tedioso a diferencia de css.

hay multiples formas para hacerlo en javascript, pero yo lo voy hacer como mejor me parezca a mi, pero no importa cual sea el caso, todos formas disponibles tienen algo en comun - llamar una fucion cuando sucede ciertos eventos, tanto para cuando el raton entra en la fila y para cuando el raton sale de la fila. mi tabla es la siguiente:

<table id='rowhover'>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
</table>

algunas soluciones te diran que en cada etiqueta <tr> ingreses los dos eventos antes mencionado con sus respectivas funciones. en este caso no hay problema porque solo tengo 3 filas, pero suponte que tuviera 50 filas. entonces el trabajo es tedioso. gracias a javascript, ademas de tener las funciones para ambos eventos, tambien podriamos crear una funcion donde implemente los dos eventos a todas las etiquetas TR. por tanto, vamos a estar trabajando con tres funciones principales, comenzando por la de los eventos y luego la que declara los eventos para cada etiqueta TR.

<script type='text/javascript'>
on = '#999';
off = '#FFF';
table = document.getElementById('rowhover');

function onhover(row){
row.style.backgroundColor = on;
}

function offhover(row){
row.style.backgroundColor = off;
}

for(var i = 0; i < table.rows.length; i++){
table.rows[i].onmouseover = function(){onhover(this)};
table.rows[i].onmouseout = function(){offhover(this)};
}
</script>

las funciones son bien simple, solamente tienes que modificar las primeras tres lineas para adaptarlo a tu necesidad. on para cuando el puntero pasa por encima, off para cuando el puntero sale, y table para identificar cual es la table mediante el atributo id. entiendo que la ventaja de este script es que cumple con el estandar DOM y que deberia funcionar en todos los navegadores populares (ie, firefox, opera)



De: fraxagp
Util para: 1 personas

Fecha: 12/09/2006
Mensaje:

Antes de nada, quiero dar las gracias a Zerokilled por su aportación, que es magnifica. La alternativa de aplicar un comportamiento a las filas (tr), ya la había probado, funcionando, pero es verdad que se complica cuando hay demasiadas filas.
He aplicado un css, dandole una id a la tr pero como bien dices en firefox funciona, no así en el Explorer. Esta es la fórmula que a mi particularmente más me gusta debido a su simplicidad, aunque es una pena que de momento no sea reconocida por el Explorer entre otros navegadores.
Por lo tanto la solución del script es la más factible ya que simplifica la opción de aplicar dos comportamientos a cada fila.



De: fraxagp
Util para: 0 personas

Fecha: 12/09/2006
Mensaje:

Siento ser pesado, pero me olvide de un detalle. Como se podría hacer para añadir a la función script que el color de la fuente cambiase de color al situar el puntero encima de la fila, a la vez que también cambie el color del fondo.




De: ZeroKilled
Util para: 1 personas

Fecha: 12/09/2006
Mensaje:

no veo que seas pesado, no te preocupes. pesado serias si te vuelves insistente con lo mismo de forma innecesaria. a continuacion te voy a mostrar la solucion y tambien voy a tratar de darte una idea para que tu mismo añadas nuevas propiedades cuando lo necesites. la solucion es simple, dos variables y una propiedad adicional en los dos eventos:

color_on = '#933';
color_off = '#000';
function onhover(row){
row.style.backgroundColor = on;
row.style.color = color_on;
}

function offhover(row){
row.style.backgroundColor = off;
row.style.color = color_off;
}

fijate que ahora cada evento contiene el fragmento row.style.color con el nombre de la variable que define los colores. color_on para cuando el puntero se sobrepone y color_off para cuando el puntero sale. ahora bien, me gustaria que compares las dos propiedades que tiene cada evento, respectivamente:

row.style.color;
row.style.backgroundColor;

si se fija, al final de las dos lineas anteriores leemos el nombre de una propiedad que pertenece a CSS. si analizas bien, parece tener un patron, este patron tiene unas reglas bien sencilla. veamos un ejemplo:

- propiedades en CSS;

font-family
font-size
font-weight
color
background-image
clear
display
float
position
-moz-opacity
-moz-border-radius

- traduccion de las propiedades CSS a javascript
fontFamily
fontSize
fontWeight
color
backgroundImage
clear
display
float
position
MozOpacity
MozBorderRadius

compare las dos listas anteriores. notese la siguiente sintaxis:
* las propiedades se escriben en minuscula
* en javascript, cuando una propiedad contiene el caracter '-', este se omite y la letra siguiente se escribe en mayuscula
* si una propiedad comienza con el caracter '-', este caracter se omite y la letra siguiente se escribe en mayuscula, violando asi la primera regla mencionada.

nota: las propiedades que comienzan con el caracter '-', creo que son propiedades explicitamente del projecto mozilla, ahi incluye firefox, mozilla, seaMonkey, netscape, etc. aunque estas propiedades no estan estandarizadas por la w3c, vale la pena mencionarlos en caso de que lo necesites.

los valores para cada propiedades son tal como en CSS, lo unico que tienes que encerrarlos en comillas simples o dobles, ejemplos:
'1px'
'block'
"2in"
'left'
"url('image.jpg')"
'no-repeat'
'repeat-x'
"blue"

por ultimo, el proposito de crear una variable al principio y asignar un valor de CSS es para mantener el trabajo mas organizado y que sea facil de manejar, ayudando asi a personas que son poco capacitados en el lenguaje.



De: fraxagp
Util para: 0 personas

Fecha: 13/09/2006
Mensaje:

Hola zerokilled, he probado las modificaciones en la función y funciona perfectamente, asi como me ha quedado claro como hacer mas modificaciones. Muchas gracias



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.