2
我正在製作樂譜目錄。可用表單列在有序列表中,當懸停在「查看」時,彈出預覽圖像顯示。我注意到,當您向下滾動預覽每張圖紙時,可以通過圖像看到< li>項目下方的某些元素。我確信這與堆疊的上下文/順序有關,甚至在某個地方缺少「位置」,但我無法弄清楚。Z索引和列表項目(新手)
我這裏的情景:http://jsfiddle.net/4BwBX/
HTML:
CSS:
/** Sheet Music Store **/
#SheetMusicStore {
width: 500px;
margin: 40px auto;
}
ol.enlarge{
margin-left:0;
font-family: 'Trebuchet MS', Helvetica, Tahoma, Arial, Sans-serif;
font-size: 1em;
color: #999;
padding: 10px 20px;
box-shadow: inset 0 2px 2px #582E58;
border-radius: 6px;
background: url(http://www.antonioromo.com/newsite/images/sheet-bg.png) repeat 0 0 scroll;
color: #AAA;
}
ol.enlarge li{
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
background: transparent url(http://www.antonioromo.com/newsite/images/sheet-item-bg.png) repeat-x bottom left scroll;
padding: 5px 0 7px 0;
list-style-position: inside;
font-size: 12px;
}
ol.enlarge img{
background-color: #eae9d4;
padding: 6px;
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
border-radius: 4px;
}
ol.enlarge span.preview{
position: absolute;
left: -9999px;
background-color: #eae9d4;
padding: 10px;
font-family: 'Trebuchet MS', Helvetica, 'Droid Sans', sans-serif;
font-size: .9em;
text-align: center;
color: #495a62;
box-shadow: 0 0 20px rgba(0,0,0, .75);
border-radius: 8px;
}
ol.enlarge li:hover{
color: #EEE;
}
ol.enlarge li:hover .view{
color:#FFFFCC !important;
}
ol.enlarge .view:hover{
cursor: pointer;
}
ol.enlarge span.preview img{
padding: 2px;
background: #ccc;
}
span.view:hover ~ span.preview{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 300px; /*distance from the left of the thumbnail to the left of the popup image*/
z-index: 50;
}
ol.enlarge .price {
width: 62px;
height: 16px;
position: absolute;
top: 7px;
right: 0;
border-radius: 8px;
background: transparent url(http://www.antonioromo.com/newsite/images/buy-bg.png) repeat 0 0 scroll;
margin: 0 0 0 10px;
font-size: 10px;
text-align: center;
line-height: 16px;
text-shadow: none;
color: #BBB;
text-decoration: none;
}
ol.enlarge .price:hover {
color: #EEE;
cursor: pointer;
}
我需要的預覽圖像是在別的上面。預先感謝您的幫助!
非常感謝你,尼克! 「黑暗藝術」是描述Z指數的完美方式! :) – 2013-04-30 20:11:00