Dock-style icon list in pure HTML+CSS

Link 00:Link 00Link 01:Link 01Link 02:Link 02Link 03:Link 03Link 04:Link 04Link 05:Link 05

When you enter the icon area close to a border between two icons, it may initially zoom in on the wrong icon, however eventually the right icon will get highlighted.

This sample uses CSS transitions, meaning that it requires a Firefox 4 preview build.

Webkit manages to do ... something (Webkit tries to do some transitions in sequence instead of simultanously). Opera apparently has no support for pointer-events in HTML yet. (I've removed the non-Firefox prefixes in this version, but you can easily add them back in if you want to try it yourself).

Try to disable the stylesheet (View/Page Style/No Style in Firefox): The document remains usable. Ugly, but usable.

Since CSS selectors can only find a node based on the state of previous nodes, this demo effectively shifts the visual presentation one column, so that the element on which the visual state depends on (the link) is always in front of the the visual elements in the document structure. Visual elements are marked to not receive any mouse events.