Создание события MouseOver, такого как iTunes - PullRequest
Новая
       6

Создание события MouseOver, такого как iTunes

0 голосов
/ 09 марта 2011

Я пытался создать событие MouseOver, которое iTunes использует на своем веб-сайте.

Как в этом примере (ПРИМЕЧАНИЕ. Если у вас itunes, эта ссылка попытается запуститьэто, если у вас есть Chrome, затем выберите «ничего не делать»)

Обратите внимание на мышь над дорожкой, вы получите изображение, связанное с предварительным просмотром слева от номера дорожки.Как это сделать?

Я очень неудачно использовал событие наведения мыши.Если кто-нибудь может мне помочь, пожалуйста, сделайте!

У меня есть jQuery.Хотя мне не нужно полагаться на это

Ответы [ 2 ]

2 голосов
/ 10 марта 2011

Это может быть сделано в чистом CSS.Итак, учитывая следующую разметку ... Да, я использую <table>, но, список дорожек представляет собой табличные данные .Вы можете сделать то же самое с <div>. 

<table id="tracklist">
  <tr class="row-heading">
    <th class="col-preview">Preview</th>
    <th class="col-trackno">Track No.</th>
    <th class="col-trackname">Track Name</th>
    <th class="col-length">Track Length</th>
  </tr>
  <tr class="row-track">
    <td class="col-preview"><a href="#">Preview</a></td>
    <td class="col-trackno">1.</td>
    <td class="col-trackname">Hello World</td>
    <td class="col-length">13:37</td>
  </tr>
</table>

. Вы можете использовать следующий CSS, чтобы скрыть / показать ссылку предварительного просмотра при наведении курсора ... 

#tracklist .row-track .col-preview a {
  display: none;
}

#tracklist .row-track:hover {
  background: #ddd;
  border: 1px solid #aaa;
}

#tracklist .row-track:hover .col-preview a {
  display: block;
}

Вот результат .

ПРИМЕЧАНИЕ: Он не работает в Internet Explorer 6, но IE6 является современным эквивалентом пиньята.Бессмысленно пытаться сохранить его, даже его владелец размахивает им летучей мышью .

Что касается кнопки предварительного просмотра, вы можете использовать SoundManager2 чтобы создать нечто подобное.Просто измените приведенный выше CSS, чтобы выбрать нужный элемент.

1 голос
/ 10 марта 2011

Полагаю, вы можете использовать упорядоченный список, а затем установить изображение стиля списка при наведении курсора. 

<ol class="itunes">
  <li>Track 1</li>
  <li>Track 2</li>
  <li>Track 3</li>
</ol>

Затем вы примените к нему таблицу стилей, подобную приведенной ниже. 

.itunes li {
    list-style: decimal;
}
.itunes li:hover {
    list-style-image: url('/path/to/your/bullet/image.png');
}

Вы, конечно, захотите добавить и другие стили, например, более темную версию цвета фона при наведении и т. Д.

Заметьте, я только что прочитал ваш вопрос. Я на самом деле не тестировал его, но он должен работать нормально (кроме IE6, который поддерживает только: hover на гиперссылках).

...