Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Radio Buttons onMouseover

  1. Aug 5, 2009 #1
    This is probably an easy solution, but I can't figure it out for the life of me. I have a bunch of radio buttons with corresponding text right next to it. What I want to happen is that when the mouse is moved over the radio button, I want the text background to get highlighted. As you can see from the code below, I only get the text background highlighted when the mouse is over the text or only the radio button is highlighted when the mouse is over the radio button. How can I fix this? Thanks. -jjiimmyy101

    <input type="radio" name="Pizza" onMouseover="style.background='red'" onMouseout="style.background='white'" value="Large" id="Large">

    <label for="Large" onMouseover="style.background='red'" onMouseout="style.background='white'">Large</label>

    <input type="radio" name="Pizza1" onMouseover="style.background='red'" onMouseout="style.background='white'" value="Small" id="Small">

    <label for="Small" onMouseover="style.background='red'" onMouseout="style.background='white'">Small</label>
  2. jcsd
  3. Aug 5, 2009 #2


    User Avatar
    Homework Helper

    Hi jjiimmyy101,

    If you add an id value to the labels, then you can refer directly to the label properties inside the radio statements (I've called the first label AAA and the second label BBB so you can see my additions easier):

    <input type="radio" name="Pizza" onMouseover="AAA.style.background='red'" onMouseout="AAA.style.background='white'" value="Large" id="Large">

    <label for="Large" onMouseover="style.background='red'" onMouseout="style.background='white'" id="AAA">Large</label>

    <input type="radio" name="Pizza1" onMouseover="BBB.style.background='red'" onMouseout="BBB.style.background='white'" value="Small" id="Small">

    <label for="Small" onMouseover="style.background='red'" onMouseout="style.background='white'" id="BBB">Small</label>
  4. Aug 6, 2009 #3
    Gee whiz. At least I knew the answer would be easy. Thank you so much :smile:
  5. Aug 6, 2009 #4


    User Avatar
    Homework Helper

    You're welcome!
Share this great discussion with others via Reddit, Google+, Twitter, or Facebook