创建像 iTunes 一样的 MouseOver 事件

Question

我一直在尝试创建一个类似于 iTunes 目前在其网站上使用的 MouseOver 事件。

像这个例子（注意：如果您有 iTunes，此链接将尝试启动它，如果您有 Chrome，则选择“不执行任何操作”）

请注意，将鼠标悬停在您的曲目上获取链接到曲目编号左侧预览的图像。这是怎么做到的？

我一直在使用鼠标悬停事件，但非常不成功。如果有人可以帮助我，请帮助我！

我有可用的 jQuery。虽然我不需要依赖这个

Answer 1

这实际上可以用纯 CSS 来完成。因此，考虑到以下标记...是的，我正在使用 ，但是，曲目列表是表格数据。您可以使用

执行相同的操作。

<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 相当于现代的 piñata。尝试保存它是毫无意义的，连它的主人都在用球棒挥舞它。

---

至于实际的预览按钮，您可以使用 SoundManager2 创建类似的东西。只需修改上面的 CSS 以定位正确的元素即可。

Answer 2

我想您可以使用有序列表，然后在悬停时设置列表样式图像。

<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 在超链接上）。