1銆侾C绔疊utton鐨勪笁绉嶇姸鎬侀兘鏄疨C绔殑銆傚鏋滆瀹炵幇涓€涓敤鎴蜂綋楠屽ソ鐨凚utton锛岃嚦灏戦渶瑕佽缃笁绉嶇姸鎬併€係tyle:NormalHoverstateActive鐘舵€侊紙褰撶劧涔熷彲浠ユ牴鎹儏鍐垫坊鍔犲叾浠栫姸鎬侊紝姣斿Disabled鐘舵€侊紝Loading鐘舵€侊級浠ntdesign涓轰緥锛屼粙缁嶄互涓嬩笁绉嶇姸鎬侊細NormalHover鐘舵€侊紙鍏夋爣鎮仠鍦ㄤ笂闈級thebutton)杩欑鐘舵€侊紝閫氬父鐨勮璁¤鑼冩槸锛氬厓绱犵殑浜害楂樹簬姝ｅ父銆傞紶鏍囨槸鎵嬬殑褰㈢姸銆傦紙鐩殑鏄獊鍑烘樉绀洪紶鏍囧仠鐣欑殑鍏冪礌锛岄伩鍏嶇偣閿欐寜閽級Active鐘舵€侊紙榧犳爣宸﹂敭鎸変笅鎸夐挳骞朵繚鎸佹寜涓嬬姸鎬侊級銆傚湪杩欑鐘舵€佷笅锛岄€氬父鐨勮璁¤鑼冩槸锛氬厓浠剁殑浜害浣庝簬姝ｅ父鐘舵€併€傦紙鐩殑鏄粰鐢ㄦ埛鍙嶉鍏冪礌琚偣鍑讳簡锛屼寒搴︿笌Hover鐘舵€佸姣旓紝璁╃敤鎴锋竻妤氱殑鐭ラ亾鎴戠偣鍑讳簡鍝竴涓€傦級2.Button涓嶉渶瑕丠over鐘舵€佸湪绉诲姩绔紝閫氬父涓嶉渶瑕佺Щ鍔ㄧ鐨勬偓鍋滅姸鎬併€?涓轰粈涔堬紵鍥犱负鍦ㄨЕ灞忚澶囦笂锛屼綘鐐瑰嚮鍝噷锛屸€滃厜鏍団€濆氨浼氬浐瀹氬湪閭ｉ噷锛岃€屼綘婊戝姩鍝噷锛屸€滃厜鏍団€濆氨浼氫竴鐩村浐瀹氬湪閭ｉ噷銆傝繖浼氬鑷碒over鐘舵€佷笉鏂瑙﹀彂锛屼絾鏄鏃舵墜鎸囧凡缁忕寮€璁惧锛屽睆骞曚笂鐪嬩笉鍒板厜鏍囷紙澶ч儴鍒嗙Щ鍔ㄧ敤鎴蜂笉鐭ラ亾绉诲姩绔篃鏈夆€滃厜鏍団€濓級锛屾墍浠ョ敤鎴风殑绗竴鍙嶅簲浼氭槸鈥斺€斾綘鐨勪唬鐮佹湁bug銆傜Щ鍔ㄧ娉ㄦ剰浜嬮」鍥犱负娌℃湁Hover鐘舵€侊紝鎵€浠ュ湪绉诲姩绔紝Active鐘舵€佸繀椤讳笌姝ｅ父鐘舵€佹湁瓒冲鐨勫尯鍒紝鎵嶈兘缁欑敤鎴烽€犳垚鈥滃弽宸€濄€傛瘮濡傛湰鏂囩殑灏侀潰鍥撅紝鍦ㄦ垜寮€鍙戠殑鈥淕ame鈥濇父鎴忎腑锛屸€淐reateRoom鈥濇寜閽殑Active鐘舵€佷笌姝ｅ父鐘舵€佹湁寰堝ぇ涓嶅悓锛屽彧鏄负浜嗗埗閫犫€滃姣斺€濄€傚綋鐒讹紝寰堝鎵嬫満娴忚鍣紝涓轰簡璁╂椿鍔ㄧ姸鎬佹洿鍔犳槑鏄撅紝璁剧疆浜嗚繖涓粯璁ゆ牱寮忥細-webkit-tap-highlight-color锛屽綋鐢ㄦ埛閬囧埌浜や簰鍏冪礌鏃讹紝浼氭湁涓€涓緢浜殑鍗婇€忔槑濉厖鐭╁舰銆傚鏋滄兂鍦ㄥ悇涓墜鏈烘祻瑙堝櫒涓婁繚鎸佺粺涓€鐨勪氦浜掍綋楠岋紝寤鸿閲嶅啓杩欎釜鏍峰紡锛歜utton:active{-webkit-tap-highlight-color:rgba(000/0);}鐒跺悗鑷繁鍔ㄦ墜锛宲ut涓诲姩寮忛鏍艰皟鏁存瘮杈冩槑鏄俱€傚浣曞皢Hover娣诲姞鍒癙C鑰屼笉鏄皢Hover娣诲姞鍒扮Щ鍔ㄨ澶囷紵濡傛灉鎮ㄧ殑瑙︽懜灞忚澶囪繛鎺ヤ簡澶栨帴閿洏锛屽垯瀹冩湁涓€涓厜鏍囥€傚洜涓哄畠鏈変竴涓厜鏍囷紝鎵€浠ュ畠闇€瑕佹偓鍋滅姸鎬併€傞棶棰樻潵浜嗭紝鎴戜滑鎬庝箞鐭ラ亾璁惧鏈夋病鏈夊厜鏍囧憿锛熼偅涔堟垜浠彲浠ョ粰鏈夊厜鏍囩殑娣诲姞Hover鐘舵€侊紝娌℃湁鍏夋爣鐨勫拷鐣over鐘舵€併€傜瓟妗堟槸锛氫换鎰忔偓鍋溿€侤media(any-hover:hover){button:hover{鑳屾櫙锛氶粍鑹诧紱}}鍙細鍦ㄧ敤鎴锋湁鍏夋爣鏃舵樉绀烘偓鍋滅姸鎬佹牱寮忋€?.娉ㄦ剰鏍峰紡鐨勯『搴忓簲璇ユ槸hover鏍峰紡鍦ㄥ墠锛宎ctive鏍峰紡鍦ㄥ悗銆傝繖鏍凤紝娲诲姩鐘舵€佺殑鏍峰紡鍙互瑕嗙洊鎮仠鐘舵€佺殑鏍峰紡銆傚畬鏁寸殑css浠ｇ爜濡備笅锛欯media(any-hover:hover){button:hover{background:yellow;}}button:active{鑳屾櫙锛氱豢鑹诧紱-webkit-tap-highlight-color:rgba(000/0);}4.鍐欏湪鏈€鍚庛€傚鏋滀綘鍜屾垜涓€鏍凤紝鍠滄浠ｇ爜绾噣锛屼笉鎺烘潅澶氫綑鐨勫姛鑳斤紝浣犲彲浠ヨ嚜宸卞啓Button锛屾妸浣犻渶瑕佺殑缁勪欢灏佽璧锋潵锛屾病浠€涔堝ソ鎷呭績鐨勩€傚彲鑳界粍浠跺簱姣旇緝绗ㄩ噸锛屼絾鏄緢鍏ㄩ潰馃榿鎴戞槸鍏紬鍙枫€婄嚎涓嬫淳瀵规父鎴忋€嬬殑浣滆€匟ullQin锛堟杩庡叧娉ㄥ叕浼楀彿锛岃仈绯绘垜锛屼氦涓湅鍙嬶級锛屼綔鑰呴渶瑕佽浆鍙戞湰鏂囧墠闇€鑾峰緱绉﹁但鎺堟潈銆傛垜鐙珛寮€鍙戜簡銆婅仈鏈烘娓稿悎闆嗐€嬶紝杩欐槸涓€涓綉椤碉紝鍦ㄨ繖閲屼綘鍙互杞绘澗鍜屾湅鍙嬩竴璧风帺缃戠粶娓告垙锛屼簲瀛愭绛夋父鎴忥紝鍏嶈垂锛屾棤骞垮憡銆傝繕鑷富鐮斿彂浜嗐€婂悎鎴愬ぇ瑗跨摐閲嶅埗鐗堛€嬨€傝繕涓篏ameJam2022寮€鍙戜簡銆奃ice Crush銆嬶紝鍠滄鐨勮瘽鍙互鍏虫敞鎴憕鏈夌┖鎴戜細鍒嗕韩鍋氭父鎴忕殑鐩稿叧鎶€鏈€?/p>
