在过去的几个小时里，我一直在谷歌上搜索答案，并且在 stackoverflow 上出现了很多类似的实例，但似乎没有一个答案对我有用。
只是真的想作为初学者/中级用户学习/使用 JQuery，所以我希望我只是犯了一些简单的错误。可能没有帮助我正在处理的页面依赖于大约 14 个不同的 z-index 级别来获得我想要的效果。
我正在尝试设计一个看起来有点像文件夹的投资组合。理想情况下，如果我将鼠标悬停在代表“艺术品”的 div 上，一个彩色的空白矩形将从 div 后面向上滑动。如果我单击，则会加载一个新页面，其中包含更传统的画廊。
我尝试了两种不同的方法，其工作/非工作结果非常混合。这是我的脚本标签在 head 部分中的样子：
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function showHiddenDivHover(thechosenone) {
$('div[name|="foliosheet"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(600);
}
else {
$(this).slideUp(600);
}
});
}
function hideHiddenDivHover(thechosenone) {
$('div[name|="foliosheet"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideUp(600);
}
else {
$(this).slideDown(600);
}
});
}
$("#info").hover(function () {
$("#info-sheet").slideToggle("slow");
});
$("#artwork").hover(function () {
$("#artwork-sheet").slideToggle("fast");
});
</script>
第一个基于我在 randomsnippets.com 上 Allen Liu 的教程中找到的示例。我将它设计为与“a”标签中的 onMouseOver() 和 onMouseOut() 一起使用。它有点工作，因为堆栈顶部的第一个 div 运行良好，然后其他 6 个没有；但是，如果我打开 firebug 扩展，其余的 div 就会开始按需要显示（大部分情况下）。
第二种技术基于我在 JQuery 文档中看到的内容以及关于 stackoverflow 和 JSFiddle 示例的类似问题（如http://jsfiddle.net/nick_craver/JcBAd/）。
下面是正文中的一些 HTML 的样子：
<div id="artwork"><a href="#" onMouseOver="javascript:showHiddenDivHover('artwork-sheet')" onMouseOut="javascript:showHiddenDivHover()">
<img src="assets/transparent_long.png" alt="artwork" width="1200" height="35"></a></div>
<div name="foliosheet" id="artwork-sheet"></div>
<div id="artwork"><div id="artwork-sheet"></div></div>
以下是相关 CSS 的样子：
#artwork {
z-index: 170;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 400px;
width: 1200px;
margin-left: 30px;
border: 2px solid red;
background-image:url(../assets/file_artwork.png);
}
#websites {
background-repeat: no-repeat;
overflow: hidden;
position: absolute;
z-index: 150;
height: 500px;
top: 360px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_websites.png);
}
#threedmodels {
z-index: 130;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 320px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_3dmodels.png);
}
#games {
z-index: 110;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 280px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_games.png);
}
#movies {
/* border: 2px solid red; */
z-index: 90;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 240px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_movies.png);
}
#flash {
z-index: 70;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 200px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_flash.png);
}
#info {
z-index: 50;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 160px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_info.png);
}
#artwork-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#ff0000;
display: none;
position: absolute;
bottom: 400px;
z-index: 160;
}
#websites-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#006F00;
display: none;
position: absolute;
bottom: 360px;
z-index: 140;
}
#threedmodels-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#0000F5;
display: none;
position: absolute;
bottom: 320px;
z-index: 120;
}
#games-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#E76000;
display: none;
position: absolute;
bottom: 280px;
z-index: 100;
}
#movies-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#80A2AA;
display: none;
position: absolute;
bottom: 240px;
z-index: 80;
}
#flash-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#AE21B1;
display: none;
position: absolute;
bottom: 200px;
z-index: 60;
}
#info-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#0079D6;
display: none;
position: absolute;
bottom: 160px;
z-index: 40;
}
我知道这是一种复杂的安排，但静态图像/div 会根据需要显示。我倾向于在我的小项目中走得更远，但希望有人能伸出援手。
去年我玩了更多的本土/修改代码。如果有人感兴趣，可以在http://www.authenticrubydesigns.com/portfolio看到。使用圆形布局和旋转，但有时处理速度太慢，而且它的设计限制了我。偶尔焕然一新并没有错。