comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Showing links while hovering using CSS |
Links (or anchor tags) are really important in webdesign/development. With all default settings (Both in CSS and the webbrowser), a link does look pretty ugly: A blue, underlined text (and purple when you visited that website). I'm sure you've seen these colours before. Luckily, CSS helps a lot. By changing the Here's a simple little CSS technique that could be really useful in your next webdesign/webdevelopment process when adding links to a HTML page. Too many links on a page can be really confusing. Some links are just more important than others: They're the one that really need the desired attention. Other links (that are more common, like links to your Twitter page or RSS feed) should not be so "special". That's exactly what we're going to do today: Hide those unimportant links and unhide (show) them while hovering its parent. We'll achieve this using CSS. Achieving this technique isn't really hard and is more like a "small trick". That doesn't mean that it isn't useful: With this small piece of CSS, you can add a lot more rest to your website, since not so many links get loads of attention: Only when hovering the parent tag. Internet Explorer 6 is a real game stopper when it comes to CSS. I'm also giving a neat little jQuery solution to make this nice technique cross-browser compatible. HTML The HTML is fairly easy (the trick is in the CSS). The example below shows two paragraphs: One normal, and one that'll hide the links. Both paragraphs have two links: One to my Twitter account and one to the RSS feed. <h2>Normal paragraph</h2> <p>Lorem ipsum dolor sit amet, consectetur <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">adipiscing elit</a>. 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. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Integer augue</a> metus, [...]</p> <h2>Colorized links on hover paragraph</h2> <p class="colorhover">Aenean non sem vel velit posuere laoreet. <a href="http://twitter.com/marcofolio" title="Follow me on Twitter">In hac habitasse</a> platea dictumst. Suspendisse posuere volutpat leo. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Donec dictum</a>, 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. [...] </p> As you could have expect, the second paragraph where the CSS First, some CSS to help you understand this trick. p { color:#888888; } a { color:#718374; } a:hover { color:#EEEEEE; }
Now for the special CSS. Remember the /* hiding the links by giving it the same colour as the text */ .colorhover a { text-decoration:none; color:#888888; } .colorhover:hover a { color:#718374; text-decoration:underline; } .colorhover:hover a:hover { color:#EEEEEE; } As you can see here, the real "trick" to this, is by applying You can access all child elements (inner anchors) even with the Internet Explorer 6 As you could have expect: This CSS trick doesn't do the trick for Internet Explorer 6. Why? Because IE6 does limit the Here's the JavaScript to achive the same kind of effect. // CSS for anchors while hovering the parent var csshover = { 'color' : '#718374', 'text-decoration' : 'underline' }; // CSS for anchors while not hovering the parent var cssclear = { 'text-decoration' : 'none', 'color' : '#888888' } $(".colorhover").hover( function() { // apply css to all anchors inside parent while hovering $(this).find("a").css(csshover); }, function() { // apply css to all anchors inside parent while not hovering $(this).find("a").css(cssclear); } ); As you can see, the jQuery/Events/hover is used. When hovering the paragraph, some CSS is applied to all anchors found inside the parent. This does work in IE6, so you'll get the same effect cross-browser! Download and Conclusion Yeah - I know. You could have just use jQuery to work for all browsers. I didn't want to do so, just to actually show the power of CSS. I'm also trying to open peoples eyes to just try stuff: Did you know the 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. Where would you try implementing something like this? Tags: css technique links html jquery tutorial webdevelopment Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |