How Can I Highlight Text Background When Hovering Over Radio Buttons?

  • Thread starter Thread starter jjiimmyy101
  • Start date Start date
  • Tags Tags
    Radio
Join the discussion
Ask a follow-up here, or get your own question answered by working scientists, mathematicians and engineers — people, not an autocomplete.
Real named experts · corrections over time · the nuance an AI answer skips
Sign up Log in
3 replies · 5K views
jjiimmyy101
Messages
74
Reaction score
0
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>
 
Physics news on Phys.org
Hi jjiimmyy101,

jjiimmyy101 said:
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>

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>
 
Gee whiz. At least I knew the answer would be easy. Thank you so much :smile:
-jjiimmyy101