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

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