This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > August 2005 > Re: CSS color change on normal text?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Re: CSS color change on normal text?
|
|
|
| The idea for my multiple choice quiz was to have the corect answer change
color on hover, but when clicked, not have it do anything. But it uses CSS
and JavaScript in conjunction, which seems too busy for me.
I've thought of a different way of showing answers for my quiz. I'm
reluctant about getting JavaScript involved, because users with Windows SP2
will be getting script warnings if using IE. I'm not sure I want to mess
with that.
I was thinking of having a blank colored space beside each question
(background-color: yellow, color: black). It's NOT an A HREF, and it's not
clickable. When the user hovers over it, the blank space reveals the answer
(colored black).
Can I have non-hyperlinked text change color on hover? Do I have to have a
class (.) to enable hovering effects, or can it be an ID (#)?
Further ideas are appreciated. Thanks!
"Yeah" <yeah@positive.net> wrote in message
news:U_8He.28588$mC.8438@okepread07...
>I have a multiple choice quiz where I would like to use CSS to change the
> color of the answers upon clicking them. I would like to present the right
> and wrong answers up front, rather than direct the user to a separate page
> with all correct answers.
>
> Do the answers have to be "links" for this to work? They have to be
> inactive
> links, because they don't actually go anywhere. They only serve the
> purpose
> of changing color whether they're right or wrong.
>
> There are four answers per question. Every answer will change a color when
> clicked. The correct answer will turn green, and the incorrect one will
> turn
> red. By the end of the quiz, most (if not all) choices will have probably
> been clicked.
>
> So, I'm trying to do two things, with a CSS class, if possible:
> 1) Prevent the clicked text link from trying to take me anywhere
> 2) Change the color of the text link
>
> How do I do this? Any pointers are appreciated! :-)
>
>
| |
| Mason A. Clark 2005-08-08, 4:21 am |
| On Sun, 7 Aug 2005 16:18:48 -0500, "Yeah" <yeah@positive.net> wrote:
>The idea for my multiple choice quiz was to have the corect answer change
>color on hover, but when clicked, not have it do anything. But it uses CSS
>and JavaScript in conjunction, which seems too busy for me.
>
>I've thought of a different way of showing answers for my quiz. I'm
>reluctant about getting JavaScript involved, because users with Windows SP2
>will be getting script warnings if using IE. I'm not sure I want to mess
>with that.
>
>I was thinking of having a blank colored space beside each question
>(background-color: yellow, color: black). It's NOT an A HREF, and it's not
>clickable. When the user hovers over it, the blank space reveals the answer
>(colored black).
>
>Can I have non-hyperlinked text change color on hover? Do I have to have a
>class (.) to enable hovering effects, or can it be an ID (#)?
>
>Further ideas are appreciated. Thanks!
This might for you: just make the answer text the same color
as the background. Invisible until *highlighted* by a sweep of
the mouse (not hover and not click). I know of a quiz that uses
this method. (The viewer may need a few words of instruction.)
Mason C
| |
| Berna Bleeker 2005-08-08, 7:28 pm |
| Mason A. Clark schreef:
> On Sun, 7 Aug 2005 16:18:48 -0500, "Yeah" <yeah@positive.net> wrote:
>
>
>
>
> This might for you: just make the answer text the same color
> as the background. Invisible until *highlighted* by a sweep of
> the mouse (not hover and not click). I know of a quiz that uses
> this method. (The viewer may need a few words of instruction.)
Another idea is just to make the answers a 'link', and give the correct
answer a differents color via a CSS class:
a.correct:hover { background-color: lime}
a.wrong:hover { background-color:red }
<a class="wrong" href="#">Wrong answer</a>
<a class="wrong" href="#">Another wrong answer</a>
<a class="correct" href="#">Correct answer</a>
In other browsers, Firefox for example, :hover works with any element,
but not in IE, so it has to 'a href="[something]"', or Explorer won't
highlight it. The "#" part is so you don't get a message about a missing
file when you click on it; but it doesn't refer to any location so you
don't jump around in the document either.
It should work with IDs just as well as with classes, but an ID can only
occur once per page, and you can add the 'correct' class to all right
answers, and the 'wrong' class to all wrong answers.
HTH,
Berna
--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ berna.bleeker@XXXXXXXXXX
\ \@/ / http://www.volksliedjes.nl
| |
|
| But doesn't HREFing to a # jump you to the top of the page? That's another
thing I'm trying to avoid. I've considered either having the user click the
correct answer, or mouseover a selection of invisible text to reveal the
answer, whichever method is simpler...
"Berna Bleeker" <berna.bleeker@XXXXXXXXXX> wrote in message
news:42f78b5d$0$11075$e4fe514c@news.xs4all.nl...
> Mason A. Clark schreef:
>
> Another idea is just to make the answers a 'link', and give the correct
> answer a differents color via a CSS class:
> a.correct:hover { background-color: lime}
> a.wrong:hover { background-color:red }
>
> <a class="wrong" href="#">Wrong answer</a>
> <a class="wrong" href="#">Another wrong answer</a>
> <a class="correct" href="#">Correct answer</a>
>
> In other browsers, Firefox for example, :hover works with any element, but
> not in IE, so it has to 'a href="[something]"', or Explorer won't
> highlight it. The "#" part is so you don't get a message about a missing
> file when you click on it; but it doesn't refer to any location so you
> don't jump around in the document either.
>
> It should work with IDs just as well as with classes, but an ID can only
> occur once per page, and you can add the 'correct' class to all right
> answers, and the 'wrong' class to all wrong answers.
>
> HTH,
>
> Berna
>
> --
> ( )_( ) Berna M. Bleeker-Slikker
> / . . \ berna.bleeker@XXXXXXXXXX
> \ \@/ / http://www.volksliedjes.nl
| |
| Berna Bleeker 2005-08-09, 7:39 pm |
| Yeah schreef:
> But doesn't HREFing to a # jump you to the top of the page? That's another
> thing I'm trying to avoid. I've considered either having the user click the
> correct answer, or mouseover a selection of invisible text to reveal the
> answer, whichever method is simpler...
Oops, you're right! I hadn't noticed that, because I tried it with a
very short page. Then how about this?
<html>
<head>
<title>Just a test</title>
<style type="text/css">
a { color: black; text-decoration: none; }
a.correct:hover { background-color: lime }
a.wrong:hover { background-color: red; color: white }
</style>
</head>
<body>
<p><a name="#question"></a><b>Will your answer to this question be
'No'?</b><br>
a. <a class="wrong" href="#question">No</a><br />
b. <a class="wrong" href="#question">Yes</a><br />
c. <a class="correct" href="#question">I can't answer that question!</a>
</p>
</body>
</html>
That works, if you don't mind the jump to the question (in IE; FF stays
put, as long as the question is in view) when you click on the link.
Berna
--
( )_( ) Berna M. Bleeker-Slikker
/ . . \ berna.bleeker@XXXXXXXXXX
\ \@/ / http://www.volksliedjes.nl
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|