Creating a MouseOver event like iTunes

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开发者_Python百科 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

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.

I suppose you could use an ordered list and then set the list style image on hover.

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

You'd then apply a stylesheet like the one below to it.

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

You'll want to add in other styles as well of course, like a darker version of the background-color on hover etc.

Note, I've just cobbled this together on reading your question. I've not actually tested it, but it ought to work okay (except in IE6 which only supports :hover on hyperlinks).