jQuery relative positioned hover
- by danixd
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.
