css - 带悬停的 radio 输入

我正在尝试将悬停添加到我的收音机框中。
！important不起作用。有什么方法可以使无线电输入字段徘徊吗？
您可以在jsfiddle上看到完整的示例。尝试在第39行执行此操作。

如果您选择第5个单选框，然后将鼠标悬停在第一个单选框上，则另一个应变成灰色，然后将其悬停为橙色。

/* Filled Rating */
.rating-fill{
    width:0;
    height:100%;
    background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGOEI0MDAiIHBvaW50cz0iMTAsMCAxMy4xLDYuNiAyMCw3LjYgMTUsMTIuOCAxNi4yLDIwIDEwLDE2LjYgMy44LDIwIDUsMTIuOCAwLDcuNiA2LjksNi42ICIvPg0KPC9zdmc+DQo=');
    position:absolute;
    background-size: contain;
    top:0;
    left:0;
    z-index:1;
}

/* Checked Inputs */

.radio-wrap input[value="5"]:checked + .rating-fill{
    width:100%;
}

.radio-wrap input[value="4"]:checked + .rating-fill{
    width:80%;
}

.radio-wrap input[value="3"]:checked + .rating-fill{
    width:60%;
}

.radio-wrap input[value="2"]:checked + .rating-fill{
    width:40%;
}

.radio-wrap input[value="1"]:checked + .rating-fill{
    width:20%;
}


/* Blank Stars */

.rating-blank{
    width:100%;
    height:100%;
    background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
    position:absolute;
    background-size: contain;
    top:0;
    left:0;
    z-index:0;
}

http://jsfiddle.net/9q9gfob6/2/

最佳答案

您的代码实际上正在工作。因为已经选择了第一颗星（初始宽度已经为20％），所以悬停不会生效。

.radio-wrap input[value="5"]:hover + .rating-fill{
    width:100%;
}

.radio-wrap input[value="4"]:hover + .rating-fill{
    width:80%;
}

.radio-wrap input[value="3"]:hover + .rating-fill{
    width:60%;
}

.radio-wrap input[value="2"]:hover + .rating-fill{
    width:40%;
}

.radio-wrap input[value="1"]:hover + .rating-fill{
    width:20%;
}

Fiddle
第五个输入被删除，因此将鼠标悬停在第五个星上不会产生任何影响。

关于css - 带悬停的 radio 输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26317763/