YJL

You probably have noticed (really, you have already?) that if you click using any mouse button or using Enter, then the link will be highlighted with a blue background.

The idea came from YouTube’s new designed homepage, I noticed the link feature when it’s still experimental. I feel it’s a nice idea, especially you are watching video from a list selectively in new tab. You will know the position of the one you just finish watching, then you can move on.

I stole the idea but not the code, I didn’t even use tool to read the code, JavaScript or CSS, it’s simple stuff. You only need to have “I get an idea!” And that’s what I didn’t have.

The code I made you can read the diffs, JavaScript diff and CSS diff. If you know them code, it’s simple code as I said. The only special thing I want to mention is margin compensates the extra space, which padding uses. The reason of adding padding is the edge of text will be touching the edge of the blue box if you don’t use it.

Here are sample link styles with padding and without padding.

Since it’s possible to open a link using mouse or keyboard, so two events need to be handle.

My originally modified idea is having an indicator flying to new link where user just clicks. Indicator takes off from previous click, then flies to new link, but that seems to be too much and overdo. How about a simple background color fade in and out? Using CSS transition?

Try to press right mouse button with any link, like it?