mouseover show, mouseleave hide

[morfasto]

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:

<script type="text/javascript">
$(document).ready(function(){
$('.fila').mouseover(function(){
$(".borrar").show();
});
 
$('.fila').mouseleave(function(){
$(".borrar").hide();
});
});
</script>
 

Código HTML:

<table>
    <tr class="fila">
        <td>mensaje 1<div class="borrar"><a href="#">X</a></td>
    </tr>
    <tr class="fila">
        <td>mensaje 2<div class="borrar"><a href="#">X</a></td>
    </tr>
    <tr class="fila">
        <td>mensaje 3<div class="borrar"><a href="#">X</a></td>
    </tr>
</table>
 

Código CSS:

.borrar{
    height:10px;
    width:10px;
    position:relative;
    float:right;
    right:0px;
    top:0px;
    color:#2D658C;
    line-height:10px;
    margin-right:5px;
    margin-top:1px;
    font-size:20px;
    display:none;
}
.borrar a{
    color:#2D658C;
    text-decoration:none;
}
.borrar a:hover{
    color:#2D658C;
    text-decoration:none;
    font-weight:bold;
}
 

Muchas Gracias!

[Fernand0]

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