Question

Ive been trying to create a MouseOver event like iTunes currently uses on thier website.

Like this example (NOTE: if you have itunes this link will try to launch it, if you have Chrome then select ‘do nothing’)

Notice on mouse over the track you get an image linked to a preview on the left of the Track number. How is this done?

Ive been using a mouseover event very unsuccessfully. If anyone can help me, please do!

i have jQuery available. Although i dont need to rely on this

Answer 1

That can actually be done in pure CSS. So, given the following markup… Yes, I’m using a <table>, but, a track list is tabular data. You could do the same thing with <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>

You can use the following CSS to hide/show the preview link on hover…

#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.

NOTE: It doesn’t work in Internet Explorer 6 but IE6 is the modern day equivalent of the piñata. It’s pointless to try and preserve it, even its owner is having a swing at it with a bat.

---

As for the actual preview button, you can use SoundManager2 to create something similar. Simply modify the CSS above to target the proper element.