css里鼠标悬停变色怎么弄
1、首先新建一个html文件，命名为test.html，在test.html文件内，使用table标签创建一个表格，用于测试。
2、在test.html文件内，设置table标签的class属性为mytable，同时设置边框为1px。
3、接着在css标签内，通过class设置表格的样式，定义它的宽度为300px,高度为200px。
4、在css标签内，通过td元素名称和“:hover”选择器定义当鼠标指向单元格时，改变单元格的背景颜色，设置为红色。
5、最后在浏览器打开test.html文件，鼠标经过之后，即可变色。
绛旓細璇硶:div:hover{background-color:red;} 1.鍒涘缓涓涓柊鐨刪tml鏂囦欢銆傚鍥 2.鍦╤tml鏂囦欢涓婃壘鍒癰ody鏍囩锛屽湪杩欎釜鏍囩閲屽垱寤轰竴涓猟iv鏍囩骞惰缃甤lass绫讳负bg銆傚鍥撅細浠ｇ爜锛3.鍦╰itle鏍囩鍚庡垱寤簊tyle鏍囩鐢ㄦ潵缁檅g绫绘坊鍔犳牱寮忋傚湪杩欑粰bg绫昏缃簡涓涓銆侀珮鍜岃儗鏅棰滆壊銆傚鍥 浠ｇ爜锛4.璁剧疆榧犳爣婊戣繃div鏃惰儗鏅鍙樿壊銆
绛旓細html榧犳爣鎮仠鏀瑰彉鏂囧瓧锛css瀹炵幇榧犳爣婊戣繃鏀瑰彉鏂囧瓧鐨勬柟娉曞緢澶氫汉杩樹笉鐭ラ亾锛岀幇鍦ㄨ鎴戜滑涓璧锋潵鐪嬬湅鍚э紒浠ｇ爜濡備笅:Menu { width:500px;margin:50px auto;border:1px solid #CCC;overflow:hidden;} Menu ul { margin:0;padding:0;list-style:none;} Menu li { width:100px;height:22px;line-height:22px;...
绛旓細a 閫夋嫨鍣ㄦ湁鍥涗釜浼被鍒嗗埆涓猴細link (鏈璁块棶鐨勯摼鎺ユ牱寮)hover 锛榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂鐨勬牱寮忥級action 锛堝湪榧犳爣鐐瑰嚮涓庨噴鏀句箣闂村彂鐢熺殑浜嬩欢鏃剁殑鏍峰紡锛塿isited 锛堝凡缁忚璁块棶杩囩殑閾炬帴鐨勬牱寮忥級鍥涗釜浼被瀹氫箟鏃堕渶瑕佹寜浠ヤ笂椤哄簭鏉ワ紝鍚﹀垯浼氬彂鐢熼敊璇備綘鎵璇寸殑灏辨槸鐜拌薄灏辨槸hover鏃跺嚭鐜扮殑鎯呭喌銆備妇涓緥瀛 鍏堝畾涔夊ソ鏍峰紡:a:...
绛旓細1銆侀鍏堬紝鎵撳紑HTML缂栬緫鍣ㄥ苟鍒涘缓涓涓柊鐨凥TML鏂囦欢锛屾瘮濡俰ndex.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜utton {background-color: #00a7d0} button:hover {background-color: #ff7701}銆3銆佸綋娴忚鍣ㄨ繍琛岀储寮昳ndex.html椤甸潰涓紝鍑虹幇钃濊壊鑳屾櫙棰滆壊鐨鎸夐挳銆4銆佸皢榧犳爣绉诲埌鎸夐挳涓婏紝鎸夐挳鐨勮儗鏅鑹...
绛旓細鍙樿壊锛氫娇css鐨鍔ㄧ敾animate鍙互瀹炵幇銆傛斁澶э細浣跨敤css鐨勮繃娓℃晥鏋渢ranslate灏卞彲浠ヤ簡瀹炵幇 濡傛灉浣犺鍚屾椂瀹炵幇锛岄偅灏遍兘鐢╝nimate锛屾牱寮忎唬鐮佸啓鍦ㄤ竴璧
绛旓細鍒╃敤 :hover 浼被鍗冲彲銆傜ず渚嬶細 .menu { display: block; } .menu .item { display: inline-block; margin: 6px; padding: 6px 9px; border: 1px solid #ccc; border-radius: 3px; line-height: 1.5em; } .menu .item:hover { background-color...
绛旓細杩欎釜瑕佺敤JS瀹炵幇 浣犲厛鎶婁笅鎷夌殑涓滆タ鏀规垚none 鐒跺悗璁╀粬榧犳爣缁忚繃灏辨妸浠栨牱寮忔敼鎴恇lock 鍜屾坊鍔燽ackground 杩欐牱灏卞彲浠ュ疄鐜颁綘璇寸殑鏁堟灉
绛旓細鍦CSS涓锛屽垎鍒粰杩3涓摼鎺ョ殑鏍囩璁剧疆涓嶅悓鐨凜SS鏍峰紡銆俓x0d\x0a鎴戝亣璁句綘瀵硅繖涓変釜閾炬帴宸茬粡缁欎簡鍚勮嚜鐨刬d: "linka" 銆"linkb"銆 "linkc"\x0d\x0a鐒跺悗瀵硅繖3涓摼鎺ヨ繘琛孋SS璁剧疆锛歕x0d\x0a#linka a:hover{color:pink;}\x0d\x0a#linkb a:hover{color:pink;}\x0d\x0a#linkc a:...
绛旓細鍦css涓杩欎箞鍐欏氨琛屼簡鍟 nav{ background-color:orange;} nav:hover{ background-color:purple;}
绛旓細缁欎綘涓緥瀛愶紝鐢╫nmousemove鍜宯mouseout銆傚叿浣css棰滆壊绛夎嚜宸辨敼涓涓嬨 .input_out{width:60px;height:30px;border:1pxsolid#CCC;background-color:#FFF;} .input_move{width:60px;height:30px;border:1pxsolid#CCC;background-color:#FFFFCC;} 娑夊強鍒癷nput閲岀殑鏂囧瓧鐨勬爣绛惧ぇ鑷存湁涓ょ鈥斺旀枃鏈鍜屾寜閽...
