конфликта между скрытым DIV и отображается DIV

Question

У меня есть интерактивный DIV:

#next { 
    cursor:cell; 
    z-index:100; 
} 

, который активируется этим JavaScript:

$('#next').click(function() { 
    $('.current').removeClass('current').hide() 
} 

И дивы:

#zob { 
    width: 100% ; height: 20px; 
} 

#zobbig { 
    position:absolute; 
    width: 100% ; 
    height: 250px; 
} 

и когда i зависает на #zob, затем появляется #zobbig.

#zob:hover ~#zobbig { 
    cursor:alias; 
    opacity:0.8; 
    margin-left: auto; 
    margin-right: auto ; 
} 

Моя проблема заключается в том, что, когда она появляется это сделать мой #next Дива unlickable, даже когда я не парю на #zob. Зона 250px (высота #zobbig) отключает функцию щелчка деления #next. Я просто хочу, чтобы мой #next div был доступен, как и предполагалось.

Спасибо за вашу помощь

Dan

(вы можете увидеть его непосредственно на http://blog.dansayag.com)

или на http://jsfiddle.net/CEtfh/108/

---

, чтобы сделать его проще: если вы идете на скрипка есть фотография bob dylan. Если вы указываете курсором на глаз, курсор становится крестом. Если вы укажете на шляпу, курсор будет нормальным. Я просто хочу, чтобы курсор будет крестом на всем Боб Дилан изображений ...

Если вы идете на скрипке вы также поймете, что ZOB и что ZOBBIG

Answer 1

Here найти ссылку на скрипку, где я сделал это немного яснее для всех, чтобы видеть.

Ваша проблема возникает из-за того, что вы не устанавливаете отображение: none; к вашим элементам, но вы просто делаете их невидимыми. Поэтому они все еще существуют на HTML-странице и должны выравниваться друг относительно друга, а интерактивный div с изображением внутри выталкивается из div #zob. Я предлагаю вам изменить свой образ укрытий элементов в biginning с

disply: none; 

, а затем отобразить их снова

display: block; 

EDIT: Изменение размера окна в скрипкой поэтому картинка немного больше, в противном случае не будет никакого интерактивного div на всех