Foros del Web » Programando para Internet » Javascript »

mouseover show, mouseleave hide

Estas en el tema de mouseover show, mouseleave hide en el foro de Javascript en Foros del Web. Hola, que tal? Estoy haciendo una tabla que contiene una lista de mensajes. Lo que quiero es que cuando uno pase el mouse sobre una ...
  #1 (permalink)  
Antiguo 23/01/2012, 19:23
Avatar de morfasto  
Fecha de Ingreso: julio-2011
Ubicación: Lima
Mensajes: 291
Antigüedad: 12 años, 8 meses
Puntos: 8
mouseover show, mouseleave hide

Hola, que tal?

Estoy haciendo una tabla que contiene una lista de mensajes. Lo que quiero es que cuando uno pase el mouse sobre una fila, solo en esta fila aparezca un div con un link para borrar el mensaje.

Pero estoy teniendo problemas para hacer que aparezca solo el div de fila en la que esta el mouse, pero nose como hacerlo. He logrado hacer que aparezcan y desaparezcan todos los divs de todas las filas cuando tengo el mouse sobre cualquiera de las filas, pero no es lo que quiero.

Aqui esta el codigo que hice, espero que me puedan ayudar.
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('.fila').mouseover(function(){
  4. $(".borrar").show();
  5. });
  6.  
  7. $('.fila').mouseleave(function(){
  8. $(".borrar").hide();
  9. });
  10. });
  11. </script>

Código HTML:
Ver original
  1.     <tr class="fila">
  2.         <td>mensaje 1<div class="borrar"><a href="#">X</a></td>
  3.     </tr>
  4.     <tr class="fila">
  5.         <td>mensaje 2<div class="borrar"><a href="#">X</a></td>
  6.     </tr>
  7.     <tr class="fila">
  8.         <td>mensaje 3<div class="borrar"><a href="#">X</a></td>
  9.     </tr>

Código CSS:
Ver original
  1. .borrar{
  2.     height:10px;
  3.     width:10px;
  4.     position:relative;
  5.     float:right;
  6.     right:0px;
  7.     top:0px;
  8.     color:#2D658C;
  9.     line-height:10px;
  10.     margin-right:5px;
  11.     margin-top:1px;
  12.     font-size:20px;
  13.     display:none;
  14. }
  15. .borrar a{
  16.     color:#2D658C;
  17.     text-decoration:none;
  18. }
  19. .borrar a:hover{
  20.     color:#2D658C;
  21.     text-decoration:none;
  22.     font-weight:bold;
  23. }

Muchas Gracias!
  #2 (permalink)  
Antiguo 24/01/2012, 00:43
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 6 meses
Puntos: 19
Respuesta: mouseover show, mouseleave hide

y los </div>? se los robaron? :P

ademas usaste mouseleave y no mouseenter.. no creo que lo haga andar mal.. pero.. tal vez cambia los resultados

saludos

Etiquetas: hide, mouseover, show
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




La zona horaria es GMT -6. Ahora son las 08:47.