Showing links on hover

This page is created by Marcofolio and shows a pretty useful webdesign technique. There are four paragraphs located below. The first and the third are normal; The second and fourth have some extra CSS applied. At first, the paragraphs look link-free. But when the user hovers over the paragraph, the hidden links will be revealed.

This technique can be useful when you want to add links to certain paragraphs, but don't need a lot of attention from the user. Sadly, using only CSS, it isn't cross-browser compatible (read the article). That's where jQuery kicks in to make it work everywhere.

Normal paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dapibus ante id sem. Aenean eros. In vulputate semper augue. Vivamus nec ante a est pharetra lacinia. Cras euismod urna at massa. Fusce ac ipsum in mi volutpat lobortis. Etiam faucibus est vel nibh. Nullam orci tortor, hendrerit et, hendrerit sed, convallis sit amet, velit. Integer augue metus, pretium non, bibendum at, iaculis blandit, lorem. Duis feugiat arcu rutrum enim tempus blandit. Etiam tincidunt dignissim diam. Etiam varius lacinia nunc. Pellentesque quis lacus. Vivamus molestie facilisis diam. Phasellus varius. Donec ac metus id nisi ultricies imperdiet. In orci mauris, scelerisque in, molestie eu, suscipit ac, libero.

Colorized links on hover paragraph

Aenean non sem vel velit posuere laoreet. In hac habitasse platea dictumst. Suspendisse posuere volutpat leo. Donec dictum, ligula sed ultricies ultrices, lectus augue tempor orci, quis rhoncus lorem turpis ut velit. Nulla facilisi. Sed orci ligula, tempor non, tristique at, tempus id, orci. Sed bibendum. Aenean magna. Nam nunc. Donec vel enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec iaculis nulla in elit. Mauris feugiat, tortor sed ullamcorper lacinia, dolor ipsum imperdiet nibh, quis bibendum arcu elit id lacus.

Normal paragraph

Ut cursus. Pellentesque viverra. Quisque volutpat vehicula metus. Cras at diam. Vivamus ligula massa, eleifend sit amet, consequat vitae, sollicitudin congue, odio. Mauris tempus ullamcorper dolor. Phasellus fringilla, tellus eu vehicula egestas, massa neque tempor justo, vel molestie ipsum nisl sed dui. Duis faucibus, massa sed dictum facilisis, augue dolor ullamcorper mi, sit amet fermentum mauris arcu vitae sem. Aenean ut turpis sit amet tellus gravida posuere. Nunc blandit, ligula nec posuere vestibulum, neque diam gravida orci, eget semper magna dolor et sem. Donec dictum velit eu massa. Vestibulum ac est nec turpis condimentum molestie. Nullam iaculis augue. Mauris suscipit tortor rhoncus libero egestas molestie. Vivamus dolor. Pellentesque vehicula, tellus et aliquet posuere, odio eros pharetra ipsum, id gravida odio dolor at arcu. Duis eget elit eu risus blandit gravida. Mauris tellus orci, convallis nec, ornare et, convallis nec, mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Colorized links on hover paragraph

Praesent rhoncus malesuada mi. Etiam faucibus enim eget mi. Aenean porttitor, mi nec pellentesque venenatis, metus urna sollicitudin leo, at semper nibh nunc a erat. Ut lacinia, eros in scelerisque fringilla, enim ante sagittis purus, ut pharetra leo urna sit amet mauris. Vestibulum purus. Sed sit amet purus eu lacus ultrices rutrum. Etiam vitae lacus ac felis aliquam posuere. Mauris pharetra metus. In porttitor, ante a aliquet laoreet, ligula leo dignissim enim, sed sagittis leo massa ac nulla. Pellentesque lacinia, odio non molestie posuere, magna felis auctor nisi, a laoreet tellus mauris in lorem. Sed vitae diam. Nulla et felis. Praesent vestibulum nulla ac nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dapibus magna a mauris. Phasellus eu diam eget lectus suscipit ullamcorper. Duis tortor quam, tincidunt vel, tempus id, dignissim non, massa. Vivamus congue velit eu arcu. Aenean sapien.