Blue
Green
Green
Blue
Red
Red
input.red(type="radio" name="color" checked)
| Red
input.green(type="radio" name="color")
| Green
input.blue(type="radio" name="color")
| Blue
.graphic ♥
.graphic {
.red:checked ~ & {
background: red;
}
.green:checked ~ & {
background: green;
}
.blue:checked ~ & {
background: blue;
}
}
checked
R
G
B
R
G
B
.red
.green
.blue
.graphic ♥
.graphic {
pointer-events: none;
.red:hover ~ & {
background: red;
}
.green:hover ~ & {
background: green;
}
.blue:hover ~ & {
background: blue;
}
}
hover