I want a link to the next or previous image to appear when hovering over the main image, only I want the next link to appear when hovered over the right hand side, and previous on the left.

I have looked at jQuery's .position() and I don't think I am understanding it very well.

At the moment all I have is general mouseenter/mouseleave events, which show both links when the image is hovered.

jQuery(document).ready(function($) { 
    $('.nav-controls a').hide();                                      

    $('#slideshow').mouseenter(function() { 
       $('.nav-controls a').fadeIn(500);
    });
    $('#slideshow').mouseleave(function() { 
       $('.nav-controls a').fadeOut(500);
    });      
}); 

I'd image it to be something like:

jQuery(document).ready(function($) { 
    $('.nav-controls a').hide();      

    var image = $('#slideshow');
    var left = image.position().left(0);
    var right = image.position().left(50%); 

    left.mouseenter(function() { 
       $('.nav-controls a.previous').fadeIn(500);
    });

    left.mouseleave(function() { 
       $('.nav-controls a.previous').fadeOut(500);
    });

    right.mouseenter(function() { 
       $('.nav-controls a.next').fadeIn(500);
    });

    right.mouseleave(function() { 
       $('.nav-controls a.next').fadeOut(500);
    });  
 });

Not sure if I should be using position, if I am using it correctly. Any tips would be great.

Edit: I do not want to add unnecessary markup in the form of divs, for the left/right selectors.