悬停文本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