conflict between hidden div and displayed div - css

Question

I have a clickable div :
#next {
cursor:cell;
z-index:100;
}
That is activated by this JavaScript :
$('#next').click(function() {
$('.current').removeClass('current').hide()
}
And the divs:
#zob {
width: 100% ; height: 20px;
}
#zobbig {
position:absolute;
width: 100% ;
height: 250px;
}
and when i hover on #zob then #zobbig appears.
#zob:hover ~#zobbig {
cursor:alias;
opacity:0.8;
margin-left: auto;
margin-right: auto ;
}
My problem is that when it appears it make my #next div unlickable even when i'm not hovering on #zob. A zone of 250px (height of #zobbig) is disabling the click function of the #next div.
I just want my #next div to be clickable as it is supposed to be.
Thanks for your help
Dan
(you can see it directly on http://blog.dansayag.com)
or on http://jsfiddle.net/CEtfh/108/
to make it easier: if you go on the fiddle there is a picture of bob dylan.
If you point with the cursor on the eye, the cursor becomes a cross. If you point on the hat, the cursor is normal.
I just want the cursor to be a cross on the entire bob dylan image...
IF you go on fiddle you will also understand what is ZOB and what is ZOBBIG

Answer 1

Here is a link to fiddle, where I made it a little bit clearer for everyone to see.
Your problem comes from the fact that you don't set display: none; to your elements, but you simply make them invisible. Therefore they still exist on the HTML page and must align according to each other and the clickable div with the image inside gets pushed down from the #zob div. I suggest you change your way of hiding elements in the biginning with
disply: none;
and later display them again with
display: block;
EDIT: Resize the window in fiddle so the picture is a little bit larger, otherwise there will be no clickable div at all