Mouseover on radio button replacement?

Question

I'm using jQuery to replace my radio buttons on this page - http://www.justdoors.co/product-selection/ and was wondering if it would be possible to add a mouseover effect as well?

I would like for the grey arrows that turn green when selected to change to green on mouseover/hover as the user goes up and down the list.

You are replacing radio buttons with what? – Šime Vidas Jan 24 '11 at 14:55 — Šime Vidas, Jan 24 '11 at 14:55

score 1 · Accepted Answer · answered Jan 24 '11 at 14:49

1

It seems like all your replaced radio buttons have the class "imageCheck" so you could bind the effect on mouseover/mouseout:

$('.imageCheck')
    .mouseover(function() { 
        $(this).attr("src", "/changedimage.jpg");
    })
    .mouseout(function() {
        $(this).attr("src", "/originalimage.jpg");
});

answered Jan 24 '11 at 14:49

Lennart Koopmann

826
1
8
14

Right... that sort of does what I want it to do but the selected button still stays as green... would like that to grey out while the mouseover is in place on another selection. Would also like the button to change image/colour when the cursor is place on the label for the button – Vince P Jan 24 '11 at 15:07
Also if I select one of the other radio buttons the arrow now doesn't stay 'selected' – Vince P Jan 24 '11 at 15:08
That's just some more JavaScript to add. Set the image of $("#selectedButton") (or whatever you call it) to the grey one when hovering over other images. – Lennart Koopmann Jan 24 '11 at 15:13
Have uploaded a jsFiddle so you can see what the coding is - http://www.jsfiddle.net/PvS3C/ – Vince P Jan 24 '11 at 15:19

score 0 · Answer 2 · answered Jan 24 '11 at 14:59

0

You could always also use CSS, see an example here.

answered Jan 24 '11 at 14:59

Trufa

39,971
43
126
190

Mouseover on radio button replacement?

2 Answers2

Linked