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

[jjiimmyy101]

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>

 

[alphysicist]

Hi jjiimmyy101,

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>

 

[jjiimmyy101]

Gee whiz. At least I knew the answer would be easy. Thank you so much
-jjiimmyy101

 

[alphysicist]

Gee whiz. At least I knew the answer would be easy. Thank you so much
-jjiimmyy101

You're welcome!