隐藏的div和显示的div之间的冲突

Question

我有一个可点击的div：

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

这是由这个JavaScript激活的：

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

和divs：

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

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

当我将鼠标悬停在#zob上时，会出现#zobbig。

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

我的问题是，当它出现时，即使我没有在#next上徘徊，它也会使#zob div无法点击。 250px区域（#zobbig的高度）禁用#next div的点击功能。 我只希望我的#next div可以按照原样点击。

感谢您的帮助

丹

（您可以直接在http://blog.dansayag.com上看到）

或http://jsfiddle.net/CEtfh/108/

---

让它变得更容易：如果你继续小提琴有一张bob dylan的照片。 如果您将光标指向眼睛，光标将变为十字形。如果你指向帽子，光标是正常的。 我只想让光标成为整个鲍勃迪伦图像的交叉......

如果你继续小提琴，你也会明白什么是ZOB，什么是ZOBBIG

Answer 1

Here是一个小提琴的链接，我让每个人都看得更清楚一点。

你的问题来自于你没有设置display：none;你的元素，但你只是让它们隐形。因此，它们仍然存在于HTML页面上，并且必须彼此对齐，并且内部图像的可点击div将从#zob div下推。我建议你用

改变隐藏元素的方式

disply: none;

然后再次使用

显示它们

display: block;

编辑：调整窗口大小以使图片稍微大一些，否则根本就没有可点击的div