Showing links while hovering its parent using CSS http://www.marcofolio.net Sat, 21 Nov 2009 08:25:21 +0100 FeedCreator 1.7.2 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5300 Hey Marco. Good to see you\'ve picked this trick up. There is a ugly work around to make it work in IE6 though: http://www.xs4all.nl/~peterned/csshover.html It works... but not perfect =(! And about the links; I am not a fan of hiding content from your users. Not all users go over a paragraph while reading it. I for one like to put the cursor to the edge of the screen and scroll using the up and down keys on my keyboard. My solution would be to make the links not so noticeable, just slightly different from the text. And then apply the hover effect. That were my two cents. Gaya Mon, 20 Apr 2009 20:02:35 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5301 Thanks for your two cents Gaya - appreciate it ;) ! I wasn\'t aware of that HTC fix to apply :hover to IE6. Although I don\'t know the behavior tag in CSS is actually CSS valid? By putting it in the jQuery, it keeps your CSS clean. You\'re totally right about the fact that \"hiding links\" is actually bad. But in some cases, it could be really useful. [b]When?[/b] For example, on the bottom of many blog posts, you\'ll see links to the RSS/Twitter page. Those links are posted on every page and don\'t need the same kind of attention like the links inside the article. You can make them \"pop out\" using this technique when the user is hovering over them ;) . Anyway, this was just another one of my \"random thoughts\" that I wanted to share: It could be really useful, but if you don\'t want to use it, than don\'t :) . Thanks once again for your feedback mate! Marco Mon, 20 Apr 2009 20:08:04 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5302 Letting links at the bottom pop out is a good idea, Marco. I\'ve been using the :hover trick for quite a while. It\'s cool, and easier to implement than Javascript :) Gaya Mon, 20 Apr 2009 20:14:09 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5303 As you know, I like the idea. Regarding the jQuery solution, you could extract the css from your script by adding or removing a desired css class like this $(this).find("a" ).addClass("hoverState" ); Keep it up yo Japes Mon, 20 Apr 2009 20:34:23 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5306 Hiya Japes - Fixed your comments (crazy emoticons kicking in). Anyway, thanks for that \"light\": Adding the class with JavaScript is indeed an easier way than making a variable inside the script. The \"downside\" of this, is that you\'ll be adding more lines of code to the CSS that is only for IE6: You can\'t do a: addClass(\".colorhover:hover\" ); So you would have a specified tag for IE6 (\"hoverstate\" ) that would be loaded in every browser (just 1 line of overhead, so it doesn\'t really matter). The jQuery only gets loaded in IE6 because of the conditional statement. Anyway, thanks for sharing your thoughts! Marco Mon, 20 Apr 2009 20:40:27 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5307 Oh man. Grandeur people are so smart =) Gaya Mon, 20 Apr 2009 21:22:12 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5313 Why would you want to do this? Its really really bad from an accessibility point of view, I for one certainly don\'t hover over text in the middle of a paragraph hoping it\'ll be a link. Underline links in your main body [b]always[/b]. Darren Taylor Tue, 21 Apr 2009 09:33:10 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5314 Thanks for your comment Darren. As you can see, this is really a point that can be discussed. [url=http://www.komodomedia.com/blog/2009/04/vote-for-me-and-ill-be-your-bff/]Komodomedia[/url] is also using the same kind of technique, just above the comments. The text looks a lot clearer when in \"normal\" view, but when you hover the paragraph, it\'ll show the links. In my opinion, a perfect way where to use this technique. It\'s just a matter of personal taste too. Feel free to use it where you want, don\'t overuse it and don\'t use it if you don\'t want to ;) ! Marco Tue, 21 Apr 2009 10:25:31 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5360 This doesn\'t work in IE8. However, the same functionality can be obtained quite easily with jQuery for all browsers, with less CSS and about the same amount of jQuery. :) Here comes. CSS: [quote] p { color:#888888; } a { color:#888888; text-decoration:none;} .hoverstate{color:#718374; text-decoration:underline;} .linkhover {color: #EEEEEE;}[/quote] Javascript: [quote] $(\".colorhover\" ).bind(\"mouseenter mouseleave\", function(){ $(\"p.colorhover a\" ).toggleClass(\"hoverstate\" ); }); $(\".colorhover a\" ).bind(\"mouseover mouseout\", function(){ $(this).toggleClass(\"linkhover\" ); });[/quote] Matti Leppanen Wed, 22 Apr 2009 22:08:04 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5390 Hi Matti, Thank you for your comment! I removed your other comment and fixed the layout of yours - Many others have problems when placing actual code in the comments (where the comments change in smileys). I didn't test the page in IE8 since I'm a Mac user. I did try it in IE7 and "hoped" that it would work for IE8 too, since it worked on IE7. Sadly, it doesn't. I wasn\'t aware of the \"bind\" functionality in jQuery; As you can see in the code above, I\'m using the \"hover\" function. When using bind, you indeed make the code a little bit shorter. Thanks for your addition; as you can see, there\'s always room for improvement ;) . Greetings,,, Marco Thu, 23 Apr 2009 08:31:27 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5399 Why use bind() if you can use .hover() or .mouseenter() / .mouseleave()? http://docs.jquery.com/Events Gaya Thu, 23 Apr 2009 14:38:22 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5400 Using .bind() you save some lines of code, if using .mouseenter() / .mouseleave()/.hover() you\'d have to write two calls for .toggleClass(). Atleast for me this looks cleaner and easier to read: [quote] $(\".colorhover\" ).bind(\"mouseenter mouseleave\", function(){ $(\".colorhover a\" ).toggleClass(\"hoverstate\" ); }); [/quote] than this [quote] $(\".colorhover\" ).hover(function(){ $(\".colorhover a\" ).toggleClass(\"hoverstate\" ); },function(){ $(\".colorhover a\" ).toggleClass(\"hoverstate\" ); }); [/quote] Matti Leppänen Thu, 23 Apr 2009 15:43:21 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5448 Point taken! It\'s just readability or just what the programmer prefers =) Gaya Fri, 24 Apr 2009 09:51:12 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5456 And it is also about saving bandwidth. That .hover() example I wrote is 34 bytes larger than the .bind() example. Now, that doesn\'t seem a lot. Let\'s assume you\'ve got a site which gets ~100000 unique hits / day. Now it is already 3.4MBytes of wasted bandwidth, and 1.2GBytes per year. I know there are browser caches and other stuff which reduce the total amount, but I hope you get the picture. :) Matti Leppänen Fri, 24 Apr 2009 15:06:35 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc5901 Great trick... thanks... :cheer: Pradeep CD Mon, 04 May 2009 14:14:43 +0100 http://www.marcofolio.net/css/showing_links_while_hovering_using_css.html#josc6089 This is exactly what I\'ve been looking for! Thanks. Jon Schwab Sat, 16 May 2009 18:43:07 +0100