[jQuery] Hiding and Showing Elements on a page with mouse over

[gogojuice]

Please can someone help me toggle page elements.

I have some elements on a page and if they have a class of edit I am
wrapping some edit tags around the element and hiding it when the page
loads.

For example:-

<div id='blurb_7' class='edit'>
Some Text
</div><!-- end of blurb_7 -->

At run time gets changed to:-

<div class="admin">
<div id="blurb_7" class="edit">
<p>
<a class="modal" href="http://website/element_control/edit/blurb/
7/1">edit</a>
<a class="modal" href="http://website/element_control/del/blurb/
7/1">delete</a>
blurb
</p>
Some Text
</div>
</div>

by using this bit of code:

$('.edit').each(function() {
                                var fullid = $(this).attr('id');
                                var splitid = fullid.split('_');
                                var editlink = baseurl + 
'element_control/edit/' + splitid[0] +
'/'  + splitid[1] + '/' + pageid;
                                var dellink = baseurl + 'element_control/del/' 
+ splitid[0] + '/'
+ splitid[1] + '/' + pageid;
                                $(this).wrap('<div 
class="admin">').wrapInner('<p><a href="' +
editlink  + '" class="modal">edit</a> <a href="' + dellink + '"
class="modal">delete</a> ' + splitid[0] + '</p></div>');
                                ptotoggle = "#" + fullid + " p";
                                $(ptotoggle).hide();

                        });

All this works fine, I have created the html code that I want and then
hidden it from view.

What I want to be able to happen next is that the user then moves
their mouse over the page and when they get to one of the elements
that has the edit class, I show the links.  User moves mouse out of
the area and the edit link is hidden again.  Simple?!?

So I have been trying this and I have come up with the following line
of code which is inserted after the line $(ptotoggle).hide() in the
function above;

$(this).mouseover(function()  { $
(ptotoggle).show(); } ).mouseout( function()  { $
(ptotoggle).hide(); } );

Also tried this:-

$('#' + fullid).mouseover(function()  { $
(ptotoggle).show(); } ).mouseout( function()  { $
(ptotoggle).hide(); } );

What is happening is that only the last element on the page with the
class='edit' is being toggled.

Can someone please help, I am only just starting out with Jquery.

Thanks