You guys are funny. Because this seemed like an interesting problem, I decided to write the code for it.
There were 2 ways of doing this: 1) Absolutely position the "description" in the correct place and set display to none. Then when you mouseover it, it would change the display to block. 2) In it's default state, the "description" is placed off the screen (far to the left). Then when you hover over the a tag, it changes the position to something valid. The second way, in my opinion, is better because it does not need to use display:none; (which causes some screen readers to not read aloud). Therefore the code below implements the 2nd way. index.html: > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > http://www.w3.org/TR/html4/strict.dtd";> > > <html> > > <head> > <title>CSS Technique: Change content depending on :hover</title> > <link rel="StyleSheet" href="layout.css" type="text/css" media="screen"> > </head> > > <body> > > <div id="collectionOfBlocks"> > <a href="http://www.google.com";>Block 1<div class="description">Number > One</div></a> > <a href="http://www.google.com";>Block 2<div class="description">Number > Two</div></a> > <a href="http://www.google.com";>Block 3<div class="description">Number > Three</div></a> > <a href="http://www.google.com";>Block 4<div class="description">Number > Four</div></a> > </div> > > </body> > > </html> > layout.css: > #collectionOfBlocks { > position: relative; > display: block; > height: 200px; //Make sure to set this height > } > > #collectionOfBlocks a { > } > > #collectionOfBlocks a div.description { > position: absolute; > top: 20px; > left: -9999px; > } > > #collectionOfBlocks a:hover div.description { > left: 0px; > } > On Tue, Jan 13, 2009 at 2:58 PM, Jamie C. <[email protected]> wrote: > You douche bag, who would employ a guy that peruses porn sites trying to > get design ideas and cant fix a template in 4 months? The only piece of > functionality or content that you have on the site is a form to capture some > poor sucker's email address so you can sell it. > > Holy smokes a whole $15 dollars (The amount you offered to pay) to fix your > code! I might be able to get that DVD I have been saving up for! How > insulting! > > Stick to your day job hustling tourists at 3-card monte or whatever other > hustle you have. > > > On Tue, Jan 13, 2009 at 5:41 PM, pkr <[email protected]> wrote: > >> >> Jamie, >> >> Yeah I come to Google and post in a group thread that has 1200 >> members. Boy I sure do know how to generate that traffic huh? >> Elementary detective skills, Sherlock. >> >> Obviously you can tell that I've been trying to emulate that code... >> but because I work (a job.. look it up), I don't have time to come on >> here every day and harass people who are generally interested in >> fixing an issue with their code. The people who responded to my >> previous thread (you included) didn't help, and I even offered to pay >> to have it fixed. >> >> Get out of here with your erroneous statements. >> >> On Jan 13, 8:39 am, "Jamie C." <[email protected]> wrote: >> > 4 months to fix a template problem that hasn't made any progress since >> the >> > last thread and you have a link to some porn site, which is what you are >> > obviously promoting. Whatever dude. This group provided you with the >> > knowledge to fix the problem and you made no effort. >> > >> > It's called a red herring... look it up. >> > >> > On Tue, Jan 13, 2009 at 11:28 AM, pkr <[email protected]> wrote: >> > >> > > Jamie, >> > >> > > I don't know what seems "suspect" about not finding a solution to a >> > > problem. I am definitely "serious" about fixing this issue. It's been >> > > 4 months and I still haven't figured it out. Don't know how much more >> > > convincing you need from me to persuade you that I want to fix it. >> > >> > > On Jan 13, 6:44 am, "Jamie C." <[email protected]> wrote: >> > > > You posted this same thread back in September here: >> > >> > > > >> http://groups.google.com/group/css-design/browse_thread/thread/48a308... >> > >> > > > You might want to continue it there if you are "serious" about >> fixing the >> > > > problem. >> > >> > > > Seems suspect to me. >> > >> > > > Jamie >> > >> > > > On Tue, Jan 13, 2009 at 1:56 AM, pkr <[email protected]> wrote: >> > >> > > > > Hi all, >> > >> > > > > I've been trying to emulate an effect that I saw onwww.abum.com >> > > > > (*warning* content is NSFW)... where in the "Featured Media" >> section, >> > > > > there are four thumbnails. Upon hovering over each, you will be >> able >> > > > > to see that the description changes... I'm trying to achieve this >> > > > > effect with CSS, although some people said javascript would be >> easier. >> > > > > I'd like to use CSS to avoid unnecessary load time, but if >> javascript >> > > > > is the way to go, please show me the light! >> > >> > > > > It seems I am on the right path, although it isn't displaying how >> I'd >> > > > > like... you can see the page in question at: >> http://tinyurl.com/8f9dkf >> > >> > > > > This is the code that I am using to achieve what I have so far, >> but as >> > > > > you can see, it is a little off from where I'd like it to be. >> > >> > > > > CODE: >> > > > > #recommended a:link span, a:visited span { >> > > > > display: none; >> > > > > border: 0; >> > > > > } >> > > > > #recommended a:hover span, a:active span { >> > > > > display: inline; >> > > > > border: 0; >> > > > > } >> > >> > > > > Anyone have any idea why this is happening? >> >> > > > > -- -Richard Aday --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
