system
June 28, 2010, 12:48am
1
Hi there,
I have a quick question about a little piece of code that I’m trying to figure out.
I am trying to get a css-styled button to stay on its ‘roll-over’ state once it has been selected by its corresponding radio button (connected via the label tag). So far, I have no idea what I’m doing.
Here’s what I have so far:
http://www.kinkarso.com/testing/index.html
This is what it’s doing:
This is what I’d like it to do:
http://is.gd/d6W3m
Any experts out there that can lend a hand :)?
Thanks!
Donny
system
June 29, 2010, 8:31am
2
Thanks, that’s very helpful. Was finally able to get it to function correctly.
Donny
You can change your css to something like the following:
a.button:hover,
a.button.selected {
color:#333333;
background:url(yes.png) no-repeat 0px -176px;
}
Then in your script just add the ‘selected’ css class to the corresponding anchor tag:
(using jquery)
$(document).ready(function() {
$("input[type='radio']").click(function() {
$(this).parents("label").find(".button:first").each(function() {
$(this).toggleClass("selected");
});
});
});
Good luck
If you are ok using javascript you could force it to use the hover style once selected.