css - Radio Input with hover -



css - Radio Input with hover -

i trying add together hover radio boxes. !important not work. there way radio input fields hovering? can see total illustration on jsfiddle. tried on line 39.

if select 5th radio box, , hover on first one, other should turn gray , hovered orange.

/* 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/

your code working. because first star selected(width 20% initially), hover isn't taking effect.

.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 5th input dropped hovering on 5th star doesn't create effect.

css radio-button

Comments

Post a Comment

Popular posts from this blog

php - Edges appear in image after resizing -

php - Edges appear in image after resizing - i have implemented next function: private static function generatepicture($sizekey, $src, $initialwidth, $initialheight, $imagetype) { $destination = adimage::addsizekey($sizekey, $src); if (file_exists($destination)) { return; } $finalsize = adimage::$sizes[$sizekey]; $initialratio = $initialwidth / $initialheight; $finalratio = $finalsize["w"] / $finalsize["h"]; $newimage = imagecreatetruecolor($finalsize["w"], $finalsize["h"]); imagealphablending( $newimage, false ); imagesavealpha( $newimage, true ); $oldimage = imagecreatefromstring(file_get_contents($src)); if ($initialratio >= $finalratio) { $scale = $finalsize["h"] / $initialheight; $surpluss = abs($initialwidth - ($initialheight * $finalratio)); imagecopyresized($newimage, $oldimage, 0, 0, $surpluss / 2, 0, $finalsize["w"], $finalsize[&q
Read more

ios8 - iOS custom keyboard - preserve state between appearances -

ios8 - iOS custom keyboard - preserve state between appearances - i'm having performance problems custom keyboard i'm working on. loading words in spell correction tree takes quite bit of time. seems done each time keyboard appears - there way preserve state of keyboard? apps can suspend / resume etc - can't find documentation on how extensions, or if there's mechanism doing att all. thanks! you loading dictionary net or disk? first case nsuserdefaults, encoding (nscopying) options store info. can load in background. according docs, os typically kills extension process, so, think there no way prevent keyboard objects deallocation (you may utilize nskeydarchiver). ios8 ios-app-extension custom-keyboard
Read more

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize &
Read more