Como esconder o div no mouse sobre outra div? - javascript, css, prototypejs, mostrar-ocultar

Eu tenho um HTML mais ou menos assim:

<table>

<tr>
<td><div class="record">Record Link</div></td>
<td><div class="delete" style="display:none;">Delete Link</div></td>
</tr>

<tr>
<td><div class="record">Record Link</div></td>
<td><div class="delete" style="display:none;">Delete Link</div></td>
</tr>

</table>

Delete Link está oculto no HTML acima. eu quero mostrar Delete Link ao passar o mouse sobre o record DIV

Depois de tentar alguns tutoriais básicos de prototypejs, Sou capaz de escrever o seguinte código que está funcionando para mim, mas não foi concluído.

document.on("mouseover", "div.record", function(event, element) {
event.target.hide(); // testing: it hides the record itself
});

Os seguintes códigos são não está funcionando para mim:

$("delete").setStyle({ display: "block" });
$$("div.delete").setStyle({ display: "block" });

Respostas:

Em Prototype, definindo $("delete") você está chamando o elemento com id delete que eu não vejo em lugar nenhum. Você precisa definir o <div id="delete" style="display:none;">Delete Link</div>

e use o seguinte para vincular eventos e iniciar seu script discretamente,

EDITAR Como existem muitos div.delete, use o seletor $$ () da seguinte maneira

     document.observe("dom:loaded", function(){
var deleteLinks=$$(".delete");
for(var i=0;i<deleteLinks.length;i++){

deleteLinks[i].observe("mouseover",functio(){
this.setStyle({ display: "block" });


}); //bind event

}
});

Se você quiser se esconder em mouseover conjunto display:none ao invés de display:block Você também pode usar visibility:hidden mas isso ainda vai ocupar espaço em seu html como uma porção de área

experimente CSS:

table#mytable tr:hover .delete{  /*identify your table for this effect, so as not to affect other tables*/
display:block !important;    /* !important is needed for override since */
}                                /* you styled "display:none" on element level */

o que isso faz é detectar pairar sobre o filho a partir do nível pai (CSS faz bolhas) e, em seguida, estilizar o elemento sujeito.