As a sidenote, the code above does not validate to the W3C because we have a block level element (div.description) inside of an "a" tag.
If you want to fix it, then move div.description outside of the "a" tag and wrap both elements inside a div. Then instead of detecting for a:hover, you need to detect for div.elementWrapper:hover. IE6 only supports :hover on a tags, so if you decide to go this way, then you will need to write some javascript for IE6 to force a .hover class name on divs when you hover over them. Then change your CSS to support div.hover as well as div:hover. Good luck! On Tue, Jan 13, 2009 at 6:45 PM, Richard Aday <[email protected]>wrote: > 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 > -- -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] -~----------~----~----~----~------~----~------~--~---
