javascript - How to hide div on mouse over of another div? -

i have html this:

<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 hidden in above html. want show delete link when mouseover on related record div

after trying basic tutorials of prototypejs, able write following code working me not completed.

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

following codes not working me:

$('delete').setstyle({ display: 'block' }); $$('div.delete').setstyle({ display: 'block' }); 

in prototype, setting $("delete") calling element id delete dont see anywhere. need set <div id='delete' style='display:none;'>delete link</div>

and use following bind events , start script unobtrusively,

edit since there many div.delete use $$() selector follows

     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        }     }); 

if want hide on mouseover set display:none instead of display:block can use visibility:hidden still occupy space on html area portion