BRAND NEW to web development at all, so excuse me if this question and the following code are just crazy over the top...

Trying to build a virtual tour with divs over hover points on a map, going piece by piece, trying to get up to two div working properly, and the div that is listed second in th html is rendering weird.

"Code" is as follows:

$(document).ready(function(){

$('.content:not(p)').hide();
$('.selector:eq(0)').hide();
$('.selector:visible:first').css('background-color','#20bdbe');
$('.selector:visible:eq(1)').css('background-color','#01a490');
$('.selector:visible:eq(2)').css('background-color','#006b6b');

$('.details').hide();

$('.hover').mouseenter(
function(){
$(this).next().css('left',$(this).css('left'));
$(this).next().css('top',$(this).css('top'));
$(this).next().show();
$(this).next().mouseleave(
function(){
$(this).hide();
$('.content:not(p)').hide();
$('.selector:eq(0)').hide();
}
);
}
);

$('.selector').click(
function(){
$('.content').hide();
$('.selector:not(this)').show();
$(this).hide();
$(this).next().show();

$('.selector:visible:first').css('background-color','#20bdbe');
$('.selector:visible:eq(1)').css('background-color','#01a490');
$('.selector:visible:eq(2)').css('background-color','#006b6b');
}
);





});

Any advice greatly appreciated...