懸停文本div時彈出圖片

Question

我正在嘗試顯示有序列表中列出的樂譜的預覽。我只能在懸停在< li>元素上時顯示圖像，但我希望僅在每行的第一部分懸停時顯示圖像（「[view]」）。我試過修改不同的東西，但是我不能正確地做。這是我的實驗迄今爲止：http://www.antonioromo.com/newsite/music.html

我確定我有冗餘代碼，我可能只需要改變一些簡單的東西，但我不是專家。

這是我列出的項目的方式：

<div id="SheetMusicStore"> 
    <ol class="enlarge"> 
    <li> 
     <span class="view">[ view ]</span> 
     <span class="preview"><img src="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="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> 
    </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; 
    -moz-box-shadow: inset 0 2px 2px #582E58; 
    -webkit-box-shadow: inset 0 2px 2px #582E58; 
    box-shadow: inset 0 2px 2px #582E58; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    background: url(../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(../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; 
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
    box-shadow: 0 0 6px rgba(132, 132, 132, .75); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    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; 
    -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); 
    -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); 
    box-shadow: 0 0 20px rgba(0,0,0, .75); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
} 
ol.enlarge li:hover{ 
    color: #EEE; 
    z-index: 50; 
} 
ol.enlarge li:hover .view{ 
    color:#FFFFCC !important; 
} 
ol.enlarge .view:hover{ 
    cursor: pointer; 
} 
ol.enlarge span.preview img{ 
    padding: 2px; 
    background: #ccc; 
} 
ol.enlarge li: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; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    background: transparent url(../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; 
    z-index: 0; 
} 
ol.enlarge .price:hover { 
    color: #EEE; 
} 

而且，我不知道爲什麼會出現在留下了大量空白頁面的最底部。它是由動態創建的元素創建的嗎？預先感謝任何幫助！

Answer 1

您可以將preview嵌套在view元素內。而只是改變了

ol.enlarge li:hover span.preview 

喜歡的東西

span.view:hover span.preview 

這裏是一個demo on jsfiddle