Foros del Web » Programando para Internet » Javascript »

se me va el hover

 Estas en el tema de se me va el hover en el foro de Javascript en Foros del Web. Hola gente de js, necesito si me pueden ayudar en algo. en una serie de <tr>'s tengo estos estilos, no es mas que un hover: ...
  #1 (permalink)  
Antiguo 08/06/2011, 13:06
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
se me va el hover
Hola gente de js, necesito si me pueden ayudar en algo.
en una serie de <tr>'s tengo estos estilos, no es mas que un hover:
Código CSS: 
Ver original
  1. table#feedback-list tbody tr{  background:white; background-image:url(../images/bg_table_presupuestos.jpg); background-repeat:repeat-x; background-position:bottom;  }
  2. table#feedback-list tbody tr:hover{  background:lightgray; background-image:url(../images/bg_table_presupuestos_on.jpg);  }
luego tengo este metodo:
Código Javascript: 
Ver original
  1. function openDiv(id_div, total_bids, id_shipment){
  2.     //dialogBidDetails ES UN DIV, PREGUNTO SI ESTA VISIBLE Y LO OCULTO
  3.     //LUEGO LE DEVUELVO LOS ESTILOS ORIGINALES AL TR
  4.     if(document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display == 'table-row'){
  5.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'none';
  6.  
  7.     document.getElementById('bid_'+id_div+'_'+id_shipment).style.background= '#E4E4E4';
  8.         document.getElementById('bid_'+id_div+'_'+id_shipment).style.backgroundImage= "url(images/bg_table_presupuestos.jpg)";
  9.     document.getElementById('bid_'+id_div+'_'+id_shipment).style.backgroundRepeat= "repeat-x";
  10.     document.getElementById('bid_'+id_div+'_'+id_shipment).style.backgroundPosition= "bottom";
  11.     }else{
  12.         //SI EL TR NO ESTA VISIBLE PRIMERO LE DEVUELVO A TODOS LOS TR SUS ESTILOS ORIGINALES Y LOS OCULTO
  13.         for(var i=1; i<=total_bids; i++){
  14.             if(document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display == 'table-row'){
  15.            document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display = 'none'
  16.              
  17.                document.getElementById('bid_'+i+'_'+id_shipment).style.background= '#E4E4E4';
  18.                document.getElementById('bid_'+i+'_'+id_shipment).style.backgroundImage= "url(images/bg_table_presupuestos.jpg)";
  19.                document.getElementById('bid_'+i+'_'+id_shipment).style.backgroundRepeat= "repeat-x";
  20.                document.getElementById('bid_'+i+'_'+id_shipment).style.backgroundPosition= "bottom";
  21.  
  22.             }
  23.         }
  24.         //POR ULTIMO MUESTRO EL TR SELECCIONADO
  25.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'table-row';
  26.         //Y LE DOY EL ESTILO DEL HOVER AL TR SELECCIONADO
  27.     document.getElementById('bid_'+id_div+'_'+id_shipment).style.background= 'lightgray';
  28.         document.getElementById('bid_'+id_div+'_'+id_shipment).style.backgroundImage= "url(images/bg_table_presupuestos_on.jpg)";
  29.  
  30.     }
  31. }

lo que hace es que quede seleccionado el <tr> en donde el usuario hizo un click, si se hace click en el mismo tr este vuelve con estilos origonales y asi. funciona perfecto, pero........

pero problema es que se me va el estilo del hover table#feedback-list tbody tr:hover

que demonios tengo que hacer? si le devuelvo todos sus estilos al tr cuando no esta mas seleccionado

ayuda
Última edición por Patriarka; 08/06/2011 a las 13:14
  #2 (permalink)  
Antiguo 08/06/2011, 13:25
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: se me va el hover
No entiendo a que te refieres con que se te va. ¿Podrías ser más especifico?
  #3 (permalink)  
Antiguo 08/06/2011, 13:27
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 5 meses
Puntos: 87
Respuesta: se me va el hover
No tiene que volver a colocar todos los estilos que estaban antes de la operacion; solo tiene que borrarlos:

Código Javascript: 
Ver original
  1. document.getElementById("id").removeAttribute("style");

Así vuelve con el :hover y todo lo demás que tenia antes en las reglas CSS.
  #4 (permalink)  
Antiguo 08/06/2011, 13:29
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: se me va el hover
Agg, te me has adelantado. Justo me acababa de dar cuenta de que al poner los estilos en el propio elemento invalida cualquier otro estilo que se le pueda poner por css.

Bien hecho.
  #5 (permalink)  
Antiguo 08/06/2011, 13:35
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: se me va el hover
lo que me decis InKarC me simplifica el codigo
Código Javascript: 
Ver original
  1. function openDiv(id_div, total_bids, id_shipment){
  2.     if(document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display == 'table-row'){
  3.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'none';
  4.  
  5.        document.getElementById('bid_'+id_div+'_'+id_shipment).removeAttribute("tr_sin_hover");
  6.     }else{
  7.          for(var i=1; i<=total_bids; i++){
  8.             if(document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display == 'table-row'){
  9.              document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display = 'none'
  10.              document.getElementById('bid_'+id_div+'_'+id_shipment).removeAttribute("tr_sin_hover");
  11.             }
  12.         }
  13.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'table-row';
  14.        document.getElementById('bid_'+id_div+'_'+id_shipment).removeAttribute("tr_con_hover");
  15.  
  16.        //document.getElementById('bid_'+id_div+'_'+id_shipment).style.background= 'lightgray';
  17.         //document.getElementById('bid_'+id_div+'_'+id_shipment).style.backgroundImage= "url(<?php echo $myConfig->website_url;?>images/bg_table_presupuestos_on.jpg)";
  18.  
  19.     }
  20. }

pero no logro que quede con el estilo hover el tr seleccionado

uso estos estilos
Código CSS: 
Ver original
  1. .tr_sin_hover{  background:white; background-image:url(../images/bg_table_presupuestos.jpg); background-repeat:repeat-x; background-position:bottom;  }
  2. .tr_con_hover{  background:lightgray; background-image:url(../images/bg_table_presupuestos_on.jpg);  }
  #6 (permalink)  
Antiguo 08/06/2011, 13:42
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: se me va el hover
Creo que te has equivocado:

Código Javascript: 
Ver original
  1. function openDiv(id_div, total_bids, id_shipment){
  2.     if(document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display == 'table-row'){
  3.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'none';
  4.  
  5.        document.getElementById('bid_'+id_div+'_'+id_shipment).removeAttribute("tr_sin_hover");
  6.     }else{
  7.          for(var i=1; i<=total_bids; i++){
  8.             if(document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display == 'table-row'){
  9.              document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display = 'none'
  10.              document.getElementById('bid_'+id_div+'_'+id_shipment).removeAttribute("tr_sin_hover");
  11.             }
  12.         }
  13.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'table-row';
  14.        document.getElementById('bid_'+id_div+'_'+id_shipment).addAttribute("tr_con_hover");
  15.  
  16.     }
  17. }

Sería addAttribute en la última línea.
  #7 (permalink)  
Antiguo 08/06/2011, 13:44
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: se me va el hover
ya se esto esta mal

document.getElementById('bid_'+id_div+'_'+id_shipm ent).removeAttribute("tr_con_hover");

no tengo remover la clase css, sino agregarla.

no se el nombre de la propiedad para agregar la clase
  #8 (permalink)  
Antiguo 08/06/2011, 13:46
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: se me va el hover
Perdón, no es addAttribute , es setAttribute.
  #9 (permalink)  
Antiguo 08/06/2011, 13:48
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: se me va el hover
si tenes razon alex88
pero sigue sin funcionar
o sea no queda seleccionado con la clase tr_con_hover

no lo estamos implemetando bien, busque y encontre esto:

blabla.setAttribute('class','negrita');
Última edición por Patriarka; 08/06/2011 a las 13:53
  #10 (permalink)  
Antiguo 08/06/2011, 13:56
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años
Puntos: 344
Respuesta: se me va el hover
Pues si, tienes que pasarle el 'class' para que te lo asigne. No me había fijado que no estaba puesto.

PD: Inkar, no sabía que por preguntar se valoraba negativamente. Solamente no entendía exactamente, aunque luego me he dado cuenta. Desde luego así no animáis a que la gente ayude. No voy poniendo negativos por esa tontería.
  #11 (permalink)  
Antiguo 08/06/2011, 15:00
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 2 meses
Puntos: 288
Respuesta: se me va el hover
Bueno gracias muchachos por su ayuda, estuve a un paso de resolverlo pero
como nosotros usamos DOJO... a resolverlo con dojo

quizas el codigo les sea familiar
Código Javascript: 
Ver original
  1. function openDiv(id_div, total_bids, id_shipment){
  2.     if(document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display == 'table-row'){
  3.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'none';
  4.  
  5.        if(dojo.hasClass('bid_'+id_div+'_'+id_shipment, "tr_bid_shipment_current")){
  6.           dojo.removeClass('bid_'+id_div+'_'+id_shipment, "tr_bid_shipment_current");
  7.           dojo.addClass('bid_'+id_div+'_'+id_shipment, "tr_bid_shipment");
  8.        } else {
  9.           dojo.addClass('bid_'+id_div+'_'+id_shipment, "tr_bid_shipment_current");
  10.           dojo.removeClass('bid_'+id_div+'_'+id_shipment, "tr_bid_shipment");
  11.        }
  12.        
  13.     }else{
  14.  
  15.         for(var i=1; i<=total_bids; i++){
  16.           document.getElementById('dialogBidDetails'+i+'_'+id_shipment).style.display = 'none';
  17.           dojo.removeClass('bid_'+i+'_'+id_shipment, "tr_bid_shipment_current");
  18.           dojo.addClass('bid_'+i+'_'+id_shipment, "tr_bid_shipment");
  19.         }
  20.        
  21.         document.getElementById('dialogBidDetails'+id_div+'_'+id_shipment).style.display = 'table-row';
  22.        dojo.addClass('bid_'+id_div+'_'+id_shipment, "tr_bid_shipment_current");
  23.        
  24.     }
  25. }
Última edición por Patriarka; 08/06/2011 a las 15:06

Etiquetas: hover
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


« Tema Anterior | Próximo Tema »


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