Professional Web Applications Themes

css hover without link - Macromedia Dynamic HTML

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....

  1. #1

    Default 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.

    ntbdy Guest

  2. #2

    Default 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>

    MikeL7 Guest

  3. #3

    Default 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

    ntbdy Guest

  4. #4

    Default 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>

    MikeL7 Guest

  5. #5

    Default Re: css hover without link

    ..oO(ntbdy)
     

    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
    Michael Guest

Similar Threads

  1. Hover Text
    By Rangellalo in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 3
    Last Post: May 12th, 02:31 PM
  2. Link color doesn't change on hover
    By redblue4356 in forum Macromedia Dynamic HTML
    Replies: 5
    Last Post: June 30th, 08:15 AM
  3. hover buttons
    By DavidF in forum Web Design
    Replies: 2
    Last Post: November 8th, 02:08 PM
  4. Hover Help
    By JohnSracic webforumsuser@macromedia.com in forum Macromedia Flash Sitedesign
    Replies: 2
    Last Post: September 13th, 07:44 AM
  5. Hover
    By simonart webforumsuser@macromedia.com in forum Macromedia Dreamweaver
    Replies: 1
    Last Post: July 24th, 01:30 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139