How to hide div on mouse over of another div?

Question

I have HTML something like 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 is hidden in above HTML. I want to show Delete Link when mouseover on its related record DIV

After trying some basic tutorials of prototypejs , I am able to write following code which is working for me but not completed.

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

Following codes are not working for me:

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

Answer 1

try 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 */         

what this does is detect hovering on the child from the parent level (CSS does bubbling), and then style the subjected element.

Answer 2

In Prototype, by setting $("delete") you are calling element with id delete which i dont see anywhere. You need to set the <div id='delete' style='display:none;'>Delete Link</div>

and use the following to bind events and start your script unobtrusively,

EDIT Since there many div.delete use the $$() selector as 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 you want to hide on mouseover set display:none instead of display:block You can also use visibility:hidden but that will still occupy space on your html as an area portion