Я пытаюсь отобразить предварительный просмотр нот, перечисленных в упорядоченном списке. Я могу отображать изображение только при наведении указателя на элемент < li>, но я хотел бы видеть изображение только при наведении курсора на первый раздел каждой строки («[view]»). Я пробовал изменить разные вещи, но я не могу понять это правильно. Вот так выглядит мой эксперимент: http://www.antonioromo.com/newsite/music.htmlИзображение всплывающее при наведении текста div
Уверен, что у меня избыточный код, и мне, вероятно, просто нужно что-то изменить, но я не эксперт.
Это путь я перечисляю пункты:
<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;
}
Кроме того, я не знаю, почему существует большое пустое пространство, оставленное в в самом низу страницы. Он создан элементами, созданными «на лету»? Заранее благодарю за любую помощь!
Как правило, изменение 'ли: hover' в' span.view: hover' и 'Ли: пролете парения .preview' в 'span.view: hover ~ span.preview'. Было бы проще, если бы вы могли предоставить [скрипку] (http://jsfiddle.net), чтобы люди могли действительно изменить ваш код и показать его вам. – Passerby
Большое спасибо за предложение скрипки. Я даже не знал, что это было! Я прекратил разработку веб-сайтов около 5 лет назад, и теперь это другой мир! :) Я попробовал ваше предложение, которое так же, как и у Мартина, но оно все еще не работает. Я не знаю, какого черта я делаю неправильно. :/ –
Ну, мое предложение не совсем такое же, как у Мартина, но логика похожа. Я проверил вашу ссылку, и, по-прежнему проблема заключается в том, что я не могу изменить свой стиль для тестирования. Я все еще предлагаю вам сделать скрипку _yourself_. Мало того, что это обеспечивает удобство для людей, но есть также шансы, что, создав свою собственную скрипку, вы, наконец,/случайно узнали, в чем проблема. – Passerby