Simian Design: Blog-Fu: Changing Links in a fantastic way.

May 25, 2003

Changing Links in a fantastic way.

Stuart Robertson wrote an excellent article, “The Search for the Missing Link”, that shows a powerful way to highlight and accentuate links. It's done through CSS and the :hover pseudo-class. It does work in Mozilla, Netscape 6+, Opera 7, Safari and Camino. And it is beautiful. ( via Zeldman ) UPDATE: Now there has been discussion here about other ways to let the other browsers (IE) see this cool effect. Thank you Eliot, Eric and Nate for the wonderful suggestions and solutions. Eric came up with a nice, simple Javascript solution. The only downside I see to this solution is that does require individual coding for each <p> tag. But it's a simple enough javascript solution. Then Nate Steiner came up with a pure CSS solution that uses the :not pseduo-selector. It works. And is slick. And is only CSS. SON OF UPDATE: Anne has created an elegant javascript DOM solution that doesn't require any recoding of your pages. This works for IE. And it's a small, elegant script. Nice job Anne.

Post Info

Tagged As CSS, Coding, Design, HTML, Javascript

Comments are Open (11)

Posted at 01:37 PM

Comments

eliot

I wonder if some javascript could be whipped together to produce the same effect for other browsers..

Posted by: eliot | May 25, 2003 07:54 PM

Tony

It probably could. But I'd imagine it'd be a complex one, as you would have to create a DOM effect that would check the OnMouseOver state for the paragraph, and then cycle through each of the links within that paragraph. Not what I would call simple.

I'll just keeping holding out faith that IE will be upgraded sometime soon. (how deluded is that?)

Posted by: Tony | May 26, 2003 08:16 AM

Eric

The CSS version is definitely cooler, but doing it in javascript is pretty trivial:

http://www.ajah.com/hover_p.html

Its a pretty kick-ass effect, I'm going to have to find a place to use it.

Posted by: Eric | May 27, 2003 11:18 AM

Tony

Wow. That is simple. And effective.

Now I feel like a dumbass saying how difficult it would be. Never even TRIED to think of the easiest solution. This is defintely a very cool solution. Nice job.

Posted by: Tony | May 27, 2003 11:40 AM

Eric

The simple technique used there pretty ameliorates IE's lack of universal :hover support and lets you do most of the cool things people are doing w/CSS these days. I would absolutely prefer to do it in CSS, but considering how simple it is, I can deal.

Posted by: Eric | May 27, 2003 12:38 PM

Nate

I just threw together a variation on the original (non-javascript) solution, I think my version offers just a bit more backwards compatibility for non p:hover supporting browsers. Rather than emulating the functionality with javascript, I am degrading to show the links with an alternate color.
It may be a bit too exclusive, I don't know how many browsers support p:hover but *dont* support :not. Tested to work on Mozilla based browsers and Safari, tested to degrade in Windows IE. I'd be interested to see if this experement actually holds up with other browers, or if it's even worth using.
I suppose you actually get 5 different "states" this way: off, over, hover and degraded off, degraded hover.

http://web-graphics.com/tests/phover.html

Posted by: Nate | May 28, 2003 07:06 AM