Question

我正在尝试显示有序列表中列出的乐谱预览。我只能在悬停在＆lt; 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

悬停文本div时的图像弹出窗口

1 个答案: