单击更改文本颜色 [英] Change text color on click
问题描述
我有一个多项选择测验，我希望在点击它们时使用CSS来更改答案的
颜色。我想预先提供正确的
和错误的答案，而不是将用户引导到一个单独的页面
，并提供所有正确答案。
答案必须是链接吗？为了这个工作？他们必须不活动
链接，因为他们实际上并没有去任何地方。他们只服务于改变颜色的目的
无论他们是对还是错。
每个问题有四个答案。单击
时，每个答案都会改变颜色。正确答案将变为绿色，错误的答案将变为红色。在测验结束时，大多数（如果不是全部）选择可能已经点击了
。
所以，我正在尝试做两个事情，CSS类，如果可能的话：
1）防止点击的文本链接试图带我到任何地方
2）更改文本链接的颜色
我该怎么做？任何指针都表示赞赏！ :-)
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! :-)
推荐答案
On Sun，2005年7月31日13:45:18 -0500，是的< ye ** @ positive.net>写道：
On Sun, 31 Jul 2005 13:45:18 -0500, Yeah <ye**@positive.net> wrote:
我有一个多项选择测验，我想在点击它们时使用CSS来改变答案的颜色。我想提前给出正确的答案和错误的答案，而不是将用户带到一个单独的页面上，并提供所有正确的答案。
答案必须是 ;链接和QUOT;为了这个工作？他们必须是不活跃的链接，因为他们实际上并没有去任何地方。它们仅用于改变颜色的目的，无论它们是对还是错。
每个问题有四个答案。单击
后，每个答案都会改变颜色。正确答案将变为绿色，不正确的答案将变为红色。在测验结束时，大多数（如果不是全部）选择可能已被点击。
所以，我正在尝试用CSS类做两件事，如果可能：
1）防止点击的文字链接试图带我到任何地方
2）更改文本链接的颜色
我该怎么做？任何指针都表示赞赏！ ： - ）
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! :-)
为什么要使用链接？如果他们不应该像链接那样行事并且不要带你去任何地方，那么选择链接是什么？
我会用div =" answer"将答案放在div中并给出正确答案
额外课程=答辩权。在我的样式表中：
div.answer {
cursor：help; }
div.answer：活跃{
背景颜色：红色; }
div.right：活跃{
背景颜色：绿色; }
但是，嘿，_I_生活在一个完美的世界:-)
^^^^^^^^^^^^^ || ^ ^^^^^^^^^^^
||
\ /
见< http：/ /www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>并注意它
说：''用户代理不需要重新转换当前显示的文件，因为伪造的类过渡需要
。''我打赌IE是其中之一没有义务
将这些伪类实现到任何有用的扩展。
所以，在不太完美的现实世界中我会使用链接而不是div并且
以上css希望最好。
-
， - - < - @ - PretLetters： ''woest wyf''，遇见了vele interesses：----------。
|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |
| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |
| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |
` --------------------------- ----------------------- - < - @ ------------''
Why use links? If they''re not supposed to act like links and the don''t take you
anywhere, what''s with the choice for links?
I would put the answers in divs with class="answer" and give the right answer an
extra class="answer right". In my stylesheet:
div.answer {
cursor:help; }
div.answer:active {
background-color:red; }
div.right:active {
background-color:green; }
But, hey, _I_ live in a perfect world :-)
^^^^^^^^^^^^^||^^^^^^^^^^^^
||
\/
See <http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes> and note it
says: ''User agents are not required to reflow a currently displayed document due
to pseudo-class transitions.'' I bet IE is one of those that feels no obligation
to implement these pseudo classes to any useful extend.
So, In the less perfect real world I would use links in stead of div and with
the above css hope for the best.
--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''
感谢您的快速帮助！我已经实现了你的代码并对答案的操作做了一些小的改动。但是，鼠标指针
会发生变化，但单击时答案不会改变颜色。在我的CSS代码中，我
有
< Style type =" text / css">
< ！ -
div.answer {cursor：pointer}
div.answer错误：活跃{color：red}
div.answer right ：active {color：green}
// - >
< / Style>
在实际测验中在文档中的位置，我有这个代码：
< B>我们这个可笑的大商店位于哪里？< / B>< BR>
< DD>< DIV class =" answer wrong"> a。 Providence，RI< / DIV>
< DD>< DIV class =" answer right"> b。 Topeka，KS< / DIV>
< DD>< DIV class =" answer wrong"> c。檀香山，HI< / DIV>
< DD>< DIV class ="回答错误"> d。加利福尼亚州死亡谷< / DIV>
我对伪课程的体验有限。你能帮助我进一步帮助我吗？b $ b :-)
" Barbara de Zoete" < b _ ******** @ hotmail.com>在消息中写道
news：opsuskr8aix5vgts @ zoete_b ...
Thanks for the prompt assistance! I have implemented your code and made a
small alteration to the actions for the answers. However, the mouse pointer
changes, but the answers don''t change color upon click. In my CSS code, I
have
<Style type="text/css">
<!--
div.answer {cursor: pointer}
div.answer wrong:active {color: red}
div.answer right:active {color: green}
//-->
</Style>
In the actual quiz location in the document, I have this code:
<B>Where is our ridiculously huge store located?</B><BR>
<DD><DIV class="answer wrong">a. Providence, RI</DIV>
<DD><DIV class="answer right">b. Topeka, KS</DIV>
<DD><DIV class="answer wrong">c. Honolulu, HI</DIV>
<DD><DIV class="answer wrong">d. Death Valley, CA</DIV>
My experience with pseudo-classes is limited. Can you help me out a bit
further? :-)
"Barbara de Zoete" <b_********@hotmail.com> wrote in message
news:opsuskr8aix5vgts@zoete_b...
On Sun，2005年7月31日13:45:18 -0500，是的< ye ** @ positive。净>写道：
On Sun, 31 Jul 2005 13:45:18 -0500, Yeah <ye**@positive.net> wrote:
我有一个多项选择测验，我想在点击它们时使用CSS来改变答案的颜色。我想提前给出
正确的答案和错误的答案，而不是将用户带到一个单独的页面上，并提供所有正确答案。
答案必须是链接吗？为了这个工作？他们必须是不活跃的链接，因为他们实际上并没有去任何地方。他们只服务于改变颜色的目的，无论他们是对还是错。
每个问题有四个答案。单击
后，每个答案都会改变颜色。正确答案将变为绿色，不正确的答案将变为红色。在测验结束时，大多数（如果不是全部）选择可能已被点击。
所以，我正在尝试用CSS类做两件事，如果可能：
1）防止点击的文字链接试图带我到任何地方
2）更改文本链接的颜色
我该怎么做？任何指针都表示赞赏！ ： - ）
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! :-)
为什么要使用链接？如果他们不应该像链接那样行事而且不要把你带到任何地方，那么链接的选择是什么？
我会把答案放在div中with class =" answer"并给予正确的答案一个额外的类=回答权利。在我的样式表中：
div.answer {
cursor：help; }
div.answer：主动{
背景颜色：红色; div.right：active {
background-color：green; }但是，嘿，_I_生活在一个完美的世界:-)
^^^^^^^^^^^^^ || ^^^^^^^^^ ^^^
||
\ /
请参阅< http：//www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes> ;并且
请注意：''由于伪类转换，用户代理不需要重排当前显示的文档。''我敢打赌IE是那些没有义务的人之一将这些伪类实现到任何有用的扩展中。
所以，在不太完美的现实世界中，我将使用链接而不是div和
与上面的css希望最好的。
-
， - - < - @ - PretLetters：''woest wyf''，遇见vele interesses：----------。
|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |
| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |
| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |
`------------------------------- ------------------- - < - @ ------------''
Why use links? If they''re not supposed to act like links and the don''t
take you anywhere, what''s with the choice for links?
I would put the answers in divs with class="answer" and give the right
answer an extra class="answer right". In my stylesheet:
div.answer {
cursor:help; }
div.answer:active {
background-color:red; }
div.right:active {
background-color:green; }
But, hey, _I_ live in a perfect world :-)
^^^^^^^^^^^^^||^^^^^^^^^^^^
||
\/
See <http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes> and
note it says: ''User agents are not required to reflow a currently
displayed document due to pseudo-class transitions.'' I bet IE is one of
those that feels no obligation to implement these pseudo classes to any
useful extend.
So, In the less perfect real world I would use links in stead of div and
with the above css hope for the best.
--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''
是的写道：
感谢您的快速帮助！我已经实现了您的代码并对答案的操作做了一些小改动。但是，鼠标指针会发生变化，但单击时答案不会改变颜色。在我的CSS代码中，我有
<样式类型=" text / css">
<！ -
div.answer {cursor ：指针}
div.answer错误：活跃{color：red}
div.answer right：active {color：green}
// - >
< /风格>
在文档的实际测验位置，我有这样的代码：
< B>我们可笑的巨大商店在哪里？< / B>< ; BR>
< DD>< DIV class =" answer wrong"> a。普罗维登斯，RI< / DIV>
< DD>< DIV class =" answer right"> b。 Topeka，KS< / DIV>
< DD>< DIV class =" answer wrong"> c。檀香山，HI< / DIV>
< DD>< DIV class ="回答错误"> d。加利福尼亚州死亡谷< / DIV>
我对伪课程的体验有限。你能进一步帮助我吗？ ： - ）
Thanks for the prompt assistance! I have implemented your code and made a
small alteration to the actions for the answers. However, the mouse pointer
changes, but the answers don''t change color upon click. In my CSS code, I
have
<Style type="text/css">
<!--
div.answer {cursor: pointer}
div.answer wrong:active {color: red}
div.answer right:active {color: green}
//-->
</Style>
In the actual quiz location in the document, I have this code:
<B>Where is our ridiculously huge store located?</B><BR>
<DD><DIV class="answer wrong">a. Providence, RI</DIV>
<DD><DIV class="answer right">b. Topeka, KS</DIV>
<DD><DIV class="answer wrong">c. Honolulu, HI</DIV>
<DD><DIV class="answer wrong">d. Death Valley, CA</DIV>
My experience with pseudo-classes is limited. Can you help me out a bit
further? :-)
您可能会发现CSS和JavaScript的组合可以完成这项工作：
< head>
< title>答案播放< / title>
< script type =" text / javascript">
function addClass（el，c）{
var re = new RegExp（''\ b''+ c +''\ b''）;
if（el.className&& ！re.test（el.className））{
el.className + =''''+ c;
}
} < br $>
< / script>
< style type =" text / css">
.answer {cursor：指针}
.wrong {color：red}
.right {color：green}
< / style>
< / head>< body>
< b>我们这个可笑的大商店在哪里？< / B>< BR>
< ; dd>< div class =" answer" onclick ="
addClass（this，''wrong''）;
"> a。普罗维登斯，RI< / div>
< dd>< div class =" answer" onclick ="
addClass（this，''right''）;
"> b。 Topeka，KS< / div>
< dd>< div class =" answer" onclick ="
addClass（this，''wrong''）;
"> c。檀香山，HI< / div>
< dd>< div class =" answer" onclick ="
addClass（this，''wrong''）;
"> d。加利福尼亚州死亡谷< / div>
< / body>
[...]
-
Rob
You may find a combination of CSS and JavaScript will do the job:
<head>
<title>Answer play</title>
<script type="text/javascript">
function addClass( el, c ){
var re = new RegExp(''\b'' + c + ''\b'');
if ( el.className && !re.test( el.className ) ){
el.className += '' '' + c;
}
}
</script>
<style type="text/css">
.answer {cursor: pointer}
.wrong {color: red}
.right {color: green}
</style>
</head><body>
<b>Where is our ridiculously huge store located?</B><BR>
<dd><div class="answer" onclick="
addClass(this, ''wrong'');
">a. Providence, RI</div>
<dd><div class="answer" onclick="
addClass(this, ''right'');
">b. Topeka, KS</div>
<dd><div class="answer" onclick="
addClass(this, ''wrong'');
">c. Honolulu, HI</div>
<dd><div class="answer" onclick="
addClass(this, ''wrong'');
">d. Death Valley, CA</div>
</body>
[...]
--
Rob
这篇关于单击更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
