Skip to: Navigation | Content | Sidebar | Footer


Projects

Paragraph Hovering Variations

Stuart Robinson posted a great example of some lateral thinking using the CSS–2 support Mozilla, Opera, and most other non–IE browsers offer.

Stuart’s example tones down the links you’d expect to find in regular paragraph text, allowing for a quick hover of the paragraph to highlight them. While a great idea, the particular example he used unfortunately shows form over function, as usability takes a back seat to aesthetics.

Here is Stuart’s original concept with a few variations to show different approaches to the idea. Make sure to view these in a capable browser: Mozilla variants, Opera 7, Safari, Konqueror, etc.

The original: (roughly adjusted for colour scheme)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultricies purus. Proin pulvinar elit vitae dolor. Nunc cursus, turpis a dapibus condimentum, elit lectus ornare nisl.

Cras risus. Nulla facilisi. Sed odio mi, consectetuer ac, faucibus at, elementum at, nulla. Nunc dignissim nunc sit amet ipsum. Curabitur quam turpis, fringilla non, rhoncus nec, fermentum ut, nisl.

You’ll notice the original highlights links on a per–paragraph basis. Here’s how it looks if you highlight all links in the entire text block on hover:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultricies purus. Proin pulvinar elit vitae dolor. Nunc cursus, turpis a dapibus condimentum, elit lectus ornare nisl.

Cras risus. Nulla facilisi. Sed odio mi, consectetuer ac, faucibus at, elementum at, nulla. Nunc dignissim nunc sit amet ipsum. Curabitur quam turpis, fringilla non, rhoncus nec, fermentum ut, nisl. Praesent nec elit.

Both of these methods effectively hide the original links until the user provides some sort of input. Keep in mind that links are supposed to be dominant on a page to facilitate quick scanning; an argument could be made that this hovering method accomplishes the same, or better effect in the end, but it also causes the user to be more pro–active — often a bad thing to rely upon.

Let’s deviate a bit. Instead of subduing the original links, let’s try reversing the process. We’ll bring the links back to their full strength on this page, but subdue the paragraph text, and strengthen it on mouseover instead:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultricies purus. Proin pulvinar elit vitae dolor. Nunc cursus, turpis a dapibus condimentum, elit lectus ornare nisl.

Cras risus. Nulla facilisi. Sed odio mi, consectetuer ac, faucibus at, elementum at, nulla. Nunc dignissim nunc sit amet ipsum. Curabitur quam turpis, fringilla non, rhoncus nec, fermentum ut, nisl. Praesent nec elit.

Well, that’s even worse. The links are easier to spot, but the body text is way too hard to read. What if we try reversing our order here, and dull the text down on mouseover instead?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultricies purus. Proin pulvinar elit vitae dolor. Nunc cursus, turpis a dapibus condimentum, elit lectus ornare nisl.

Cras risus. Nulla facilisi. Sed odio mi, consectetuer ac, faucibus at, elementum at, nulla. Nunc dignissim nunc sit amet ipsum. Curabitur quam turpis, fringilla non, rhoncus nec, fermentum ut, nisl. Praesent nec elit.

Hey, that’s not looking that bad. The links pop right out on the mouseover, but still offer a good degree of legibility on a quick scan without the mouseover. That’s a step in the right direction. Here it is on a per–paragraph basis:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultricies purus. Proin pulvinar elit vitae dolor. Nunc cursus, turpis a dapibus condimentum, elit lectus ornare nisl.

Cras risus. Nulla facilisi. Sed odio mi, consectetuer ac, faucibus at, elementum at, nulla. Nunc dignissim nunc sit amet ipsum. Curabitur quam turpis, fringilla non, rhoncus nec, fermentum ut, nisl. Praesent nec elit.

One last thing to consider before we conclude. This is a new paradigm for users — we can assume most are used to mouse–overs on individual links, but having body text highlight unexpectedly will take some getting used to. It might be a better approach for now to offer a quick script to allow for toggling, instead of relying on the mouseovers. What makes this alternative even more valuable is that it should be workable in IE, enabling you to use it now and not in 2 years when every browser supports :hover on arbitrary elements.

The following is a quick example which, due to my very sketchy familiarity with the DOM and javascript in general, doesn’t really work the way I expected it to. But it’s a start.

highlight links

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius. Nullam quam. Suspendisse potenti. Vivamus et nibh. Duis volutpat dolor in ipsum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sagittis ultricies purus. Proin pulvinar elit vitae dolor. Nunc cursus, turpis a dapibus condimentum, elit lectus ornare nisl.

Cras risus. Nulla facilisi. Sed odio mi, consectetuer ac, faucibus at, elementum at, nulla. Nunc dignissim nunc sit amet ipsum. Curabitur quam turpis, fringilla non, rhoncus nec, fermentum ut, nisl. Praesent nec elit.

The following code is what I've used for each example:


<div id="example6">
	<p>Lorem ipsum dolor sit amet, consectetuer 
	<a href="1.html">adipiscing elit</a>. Fusce 
	varius. Nullam quam. Suspendisse potenti. 
	<a href="2.html">Vivamus et nibh</a>. Duis 
	volutpat dolor in ipsum. </p>

	<p><a href="3.html">Pellentesque habitant
	</a> morbi <a href="4.html">tristique </a> 
	senectus et netus et malesuada fames ac turpis 
	egestas. Mauris sagittis ultricies purus. Proin 
	pulvinar elit vitae dolor. Nunc cursus, 
	<a href="5.html">turpis a dapibus</a> 
	condimentum, elit lectus ornare nisl.</p>

	<p>Cras risus. Nulla facilisi. 
	<a href="6.html">Sed odio</a> mi, 
	consectetuer ac, faucibus at, elementum at, 
	nulla. <a href="7.html">Nunc</a> dignissim 
	nunc sit <a href="8.html">amet ipsum</a>. 
	Curabitur quam turpis, fringilla non, rhoncus nec, 
	fermentum ut, nisl. Praesent nec elit.</p>
</div>
	

Each example has been given a unique ID, example1 through example6. The complete CSS (aside from default color values) looks like so:


/* Example 1 */
/* Links within paragraphs (revealed) */
#example1 a { color: #5D7D9C; text-decoration: none;}
#example1 p:hover a { color: blue; text-decoration: underline; }
/* Rollover effect for links within paragraphs */
#example1 p a:hover { color: red;}

/* Example 2 */
#example2 a { color: #5D7D9C; text-decoration: none;}
#example2:hover a { color: blue; text-decoration: underline; }
#example2 a:hover { color: red;}

/* Example 3 */
#example3 p { color: #91AAC7;}
#example3:hover p { color: #335782;}

/* Example 4 */
#example4 p { color: #335782;}
#example4:hover p { color: #91AAC7;}	

/* Example 5 */
#example5 p { color: #335782;}
#example5 p:hover { color: #91AAC7;}	

#example6 {color: #335782;}
#example6 p {color: inherit;}
	
May 29th, 2003