2

我正在制作乐谱目录。可用工作表列在有序列表中，当悬停在“视图”上时，会显示弹出预览图像。我注意到，当您向下滚动预览每张工作表时，可以通过图像看到当前工作表下方 <li> 项中的某些元素。我确信这与堆叠上下文/顺序有关，甚至与某处缺少“位置”有关，但我无法弄清楚。

我在这里有这个场景：http: //jsfiddle.net/4BwBX/

HTML：

<div id="SheetMusicStore">
    <ol class="enlarge">
        <li>
            <span class="view">[ view ]</span>
            <span class="preview"><img src="http://www.antonioromo.com/newsite/images/01gnw-tn.png" alt="Just Another Dusk" /><br />Just Another Dusk (Good Night Wishes)</span>
            <span class="name">Just Another Dusk (Good Night Wishes)</span>
            <span class="price">$3.99 BUY</span>
        </li>
        <li>
            <span class="view">[ view ]</span>
            <span class="preview"><img src="http://www.antonioromo.com/newsite/images/02gnw-tn.png" alt="My Nightlight" /><br />My Nightlight (Good Night Wishes)</span>
            <span class="name">My Nightlight (Good Night Wishes)</span>
            <span class="price">$3.99 BUY</span>
        </li>
        <li>
            <span class="view">[ view ]</span>
            <span class="preview"><img src="http://www.antonioromo.com/newsite/images/03gnw-tn.png" alt="Whisper of Love" /><br />Whisper of Love (Good Night Wishes)</span>
            <span class="name">Whisper of Love (Good Night Wishes)</span>
            <span class="price">$3.99 BUY</span>
        </li>
    </ol>
</div>

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;
}

我需要预览图像位于其他任何内容之上。预先感谢您的帮助！

4

1 回答 1

2

我通过从以下位置删除z-index:0;声明来解决此问题ol.enlarge li：

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;
}

JSfiddle

Z-index 对我来说仍然是一门黑暗的艺术，但我相信通过声明z-index: 0你正在取消li自然堆叠顺序（这实际上是你在这种情况下想要的，因为它们只是充当“锚”为您的.preview图像）。这导致每个li人都“堆叠”在彼此之上——尽管顺序与正常的自上而下流程不同——这就是为什么你可以看到li上面悬停的内容li。

于 2013-04-30T19:14:58.247 回答