Question

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

Like this example（注意：如果你有itunes，这个链接将尝试启动它，如果你有Chrome然后选择'什么都不做'）

注意鼠标悬停在轨道上，您会得到一个链接到轨道号左侧预览的图像。这是怎么做到的？

我一直在使用鼠标悬停事件非常失败。如果有人可以帮助我，请做！

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

Answer 1

实际上可以在纯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;
}

Here is the result

注意：它在Internet Explorer 6中不起作用，但IE6是现代的piñata。尝试保留它是毫无意义的，even its owner is having a swing at it with a bat。

对于实际预览按钮，您可以使用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除外，它只支持：悬停在超链接上）。

像iTunes一样创建MouseOver事件

2 个答案: