|
| PORTAIL | ANNUAIRE | ARTICLES | COMPARATEUR HÉBERGEURS | DEVIS | FORUMS | RÉDUCTEUR D'URL |
|
18/02/2008, 01h38
|
#1 |
Messages: n/a
Hébergeur: |
css hover without link
http://www.quizrocket.com/idiot-quiz
They seem to be able to change the background of [LI]</li> upon mouse hover. How do they do that? There are so many css sheets there that I can't uncover what is done. I was under the impression that hover only worked with <a> tags. Thanks. |
|
|
18/02/2008, 02h22
|
#2 |
|
Messages: n/a
Hébergeur: |
Re: css hover without link
Try using this bit of code. Change the colors as you need
<ul style="list-style:none;"> <li onmouseover="style.backgroundColor='#FF0000'" onmouseout="style.backgroundColor='#FFFFFF'"> <input name="radio" type="radio" value="yes" />Your Answer </li> </ul> |
|
|
|
18/02/2008, 02h49
|
#3 |
|
Messages: n/a
Hébergeur: |
Re: css hover without link
thanks, Mike.
Although DW doesn't seem to offer the option of using li:hover, I just went ahead and added it manually. It works, at least in the latest FF and IE. But I'd wonder in what browsers it would break. Would your approach of using javascript be more reliable, do you think? also, how could I have a click anywhere in the block result in the enclosed radio button getting clicked? (they do that in the quiz thing at http://www.quizrocket.com/idiot-quiz |
|
|
|
18/02/2008, 05h24
|
#4 |
|
Messages: n/a
Hébergeur: |
Re: css hover without link
>Would your approach of using javascript be more reliable, do you think?
If the user disables Javascript, then it will not work I am not sure how its done on that page, but i made this form that does basically the same thing, be sure to not have any space after the li tags with the onclick atribute set, or the behavior won't work in FF or Opera. <style> .answer{ font-size:14px; height:3.5em; padding-top:1.5em; padding-left:1em; cursor:pointer; cursor:hand; } </style> <body> <form name="form1" action="" method="post"> <ul style="list-style:none; margin-left:-.5em;"> <li>Are you awake?</li> <li onmouseover="style.backgroundColor='#FF0000'" onmouseout="style.backgroundColor='#FFFFFF'" onclick="this.firstChild.checked=true" class="answer"><input name="radio1" type="radio" value="yes" />Yes </li> <li onmouseover="style.backgroundColor='#FF0000'" onmouseout="style.backgroundColor='#FFFFFF'" onclick="this.childNodes[0].checked=true" class="answer"><input name="radio1" type="radio" value="no" />No </li> <li>Are you alive?</li> <li onmouseover="style.backgroundColor='#FF0000'" onmouseout="style.backgroundColor='#FFFFFF'" onclick="this.firstChild.checked=true" class="answer"><input name="radio2" type="radio" value="yes" />Yes </li> <li onmouseover="style.backgroundColor='#FF0000'" onmouseout="style.backgroundColor='#FFFFFF'" onclick="this.childNodes[0].checked=true" class="answer"><input name="radio2" type="radio" value="no" />No </li> </ul> </form> </body> |
|
|
|
18/02/2008, 09h13
|
#5 |
|
Messages: n/a
Hébergeur: |
Re: css hover without link
..oO(ntbdy)
> Although DW doesn't seem to offer the option of using li:hover, I just went >ahead and added it manually. It works, at least in the latest FF and IE. > > But I'd wonder in what browsers it would break. You can apply :hover to almost any element. It works in all modern browsers, but not in IE 6 and below. And just in case you want to find out what stylesheets apply to a particular element, check out the DOM Inspector or the Firebug extension in the Firefox browser or Opera's Developer Console. All very nice and very powerful tools. Micha |
|
|
 |
| Outils de la discussion | |
|
|
