Trying to format links on FAQ page and cannot get the format to work at all. The javescript text popout is working fine. Here's a snippet of the code: <script language="javascript" type="text/javascript"> function over(faqup) { document.getElementById(faqup.id).style.display = "block"; } function out(faqup) { document.getElementById(faqup.id).style.display = "none"; } </script> <style type="text/css"> p {margin-left:20px;} a.ques:link {font-weight:bold; font-size:17pt; font-family: arial,helvetica,tahoma,sans-serif; color:steelblue; text-decoration:none;} a.ques:visited {font-weight:bold; font-size:17pt; font-family: arial,helvetica,tahoma,sans-serif; color:steelblue; text-decoration:none;} a.ques:hover {font-weight:bold; font-size:17pt; font-family: arial,helvetica,tahoma,sans-serif; color:steelblue; text-decoration:none;} p.ques {font: bold 17pt arial,helvetica,tahoma,sans-serif;color: steelblue; text-decoration:none;} </style> </head> <body> <h3>F.A.Q.</h3> <div id="ques"><p><a href="#" onmouseover="over(ans1)" onmouseout="out(ans1)">This is the first of the FAQ's</a></p></div> <div id="ans1" style="display:none;"> <p> Culpa tail consectetur pork venison beef. Tail leberkas nostrud, jerky pancetta enim laboris prosciutto turkey pariatur cillum frankfurter sed pastrami. Fatback bacon bresaola chuck quis nostrud et consectetur hamburger commodo reprehenderit qui pariatur pig ribeye. Minim jowl consequat in strip steak.</p> </div> HTML: I've tried several things, and can't alter the text properties within the link. I want to remove the underline and set the font color and make the type bold. here's a link to the complete test page code http://pastebin.com/WPjJ6Rka
We've got a nasty case of misuse of JavaScript here. Aside the fact that is ridiculously sloppily written, a thing I point out almost every time, there's just no reason to even use js here. I should also mention that many people browse with JS off, so they don't even get to see what's behind the hover (ever heard of graceful degradation?). I'll post you a working snippet by tomorrow, I promise. A fun fact about this nonsense, btw: With 3kb of markup, you deliver 75 bytes of (questionably) usable data.
you select there a.ques and a hasn't class ques. to select that a you can use #ques a which means you will select any a in div with ID ques, or you can simply add the class ques to the a.
Bogdanel has it right -- you are attempting to target a class that doesn't exist... Though as wiicker95 implied I'd be left asking what the devil makes that an anchor since it doesn't actually link to anything, what the devil makes that anchor a paragraph, why you need so many DIV, why you are using javascript to do CSS' job... Basically that whole mess needs to be pitched in the trash. I'm also a little surprised that 'FAQ' would make it all the way down to a H3... but I'd have to see the rest of the page to be sure on that; are you sure that on the real page it would be a subsection of the h2 preceding it, which in turn is a subsection of the h1 preceding it, or are you just choosing headings based on their appearance? The CSS is also pointless crap -- since anything you set on an A should inherit to all it's psuedostates, condensed font properties would shorten it, crapping everything on one line is hard to read, PT (points) is for print not screen, and since arial and tahoma are part of the same core Microsoft font set there is no reason tahoma would EVER be used in your font stack. (particularly with arial predating tahoma)... and of course setting display:none as the default state can make search engines and screen readers ignore that text. (one of the few bits of CSS browser aids like JAWS will obey!) Assuming that should indeed be a h3: <h3><abbr title="Frequently Asked Questions">FAQs</abbr></h3> <div class="question"> <h4>This is the first of the FAQ's</h4> <div class="content"> <p> Culpa tail consectetur pork venison beef. Tail leberkas nostrud, jerky pancetta enim laboris prosciutto turkey pariatur cillum frankfurter sed pastrami. Fatback bacon bresaola chuck quis nostrud et consectetur hamburger commodo reprehenderit qui pariatur pig ribeye. Minim jowl consequat in strip steak. </p> <!-- .content --></div> <!-- .question --></div> Code (markup): with this for CSS: /* use aPo instead of display so screen readers still read it! */ .question .content { position:absolute; left:-999em; } .question:hover .content { position:relative; left:0; } .question h4 { text-decoration:none; font:bold 125%/120% arial,helvetica,sans-serif; color:#48B; } Code (markup): The aPo removes it from flow, we then slide it out of the way so it can't be seen. On hover of it's parent (and therein the h4 AND .content) we remove the left position and set it back into flow as relPo. Of course, this prostrates itself in front of the proverbial equine of short stature when it comes to keyboard navigation -- but that's why it's generally a piss poor garbage idea to hide sections of content this way in the first place... NOT something I'd advocate doing on a website no matter how 'pretty' or 'neat' the effect is.