Css 带悬停的无线电输入
我正试图给我的收音机加一个悬停按钮。 !重要的东西不起作用。有没有办法让无线电输入字段悬停? 您可以在JSFIDLE上看到完整的示例。试图在第39行这样做 如果选择第五个收音机框,并将鼠标悬停在第一个收音机框上,则另一个收音机框应变为灰色,并将鼠标悬停在橙色上Css 带悬停的无线电输入,css,radio-button,Css,Radio Button,我正试图给我的收音机加一个悬停按钮。 !重要的东西不起作用。有没有办法让无线电输入字段悬停? 您可以在JSFIDLE上看到完整的示例。试图在第39行这样做 如果选择第五个收音机框,并将鼠标悬停在第一个收音机框上,则另一个收音机框应变为灰色,并将鼠标悬停在橙色上 /* Filled Rating */ .rating-fill{ width:0; height:100%; background:url('data:image/svg+xml;base64,PD94bWwgd
/* 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;
}
您的代码实际上正在运行。因为第一颗星已经被选中(最初宽度已经是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%;
}
第五个输入被删除,因此悬停在第五星上不会产生任何效果。悬停应该做什么?如果用户悬停在第一个广播框上,则.rating fillig的宽度将为20%。第一颗星是橙色的,另外四颗星是灰色的。好了,悬停开始工作了。如果选中收音机5并将收音机1悬停,则它应仅显示第一个橙色星号。其他的都是灰色的。