鼠标滑过内容变色？
在很多网页中我们都看到当鼠标滑过一个内容时，这个内容的背景会改变颜色。设置鼠标滑过背景变色只需用到 :hover 即可设置成功。
语法: div:hover{background-color: red;}
创建一个新的html文件。如图
在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg 。 如图： 代码：div class="bg"/div
在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。 如图 代码： style type="text/css" .bg{ width: 150px; height: 150px; background-color: red; } /style
设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。如图 代码： .bg:hover{ background-color: burlywood; }
实用浏览器打开。保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。、
所有代码，可把所有代码直接复制到新家的html文件上，保存好后用浏览器打开即可看到效果。如图： 所有代码： !DOCTYPE html html head meta charset="UTF-8" title鼠标滑过背景变色/title style type="text/css" .bg{ width: 150px; height: 150px; background-color: red; } .bg:hover{ background-color: burlywood; } /style /head body div class="bg"/div /body /html
绛旓細鍦ㄥ緢澶氱綉椤典腑鎴戜滑閮界湅鍒板綋榧犳爣婊戣繃涓涓唴瀹规椂锛岃繖涓唴瀹圭殑鑳屾櫙浼氭敼鍙橀鑹銆傝缃紶鏍囨粦杩囪儗鏅彉鑹插彧闇鐢ㄥ埌 :hover 鍗冲彲璁剧疆鎴愬姛銆傝娉: div:hover{background-color: red;} 鍒涘缓涓涓柊鐨刪tml鏂囦欢銆傚鍥 鍦╤tml鏂囦欢涓婃壘鍒癰ody鏍囩锛屽湪杩欎釜鏍囩閲屽垱寤轰竴涓猟iv鏍囩骞惰缃甤lass绫讳负bg 銆 濡傚浘锛 浠ｇ爜...
绛旓細dw鍋氬埌榧犳爣鍒掕繃鏂囧瓧鍙樿壊鏂规硶锛1.Dreamweaver閲屾柊寤烘枃妗ｏ紝杈撳叆鏂囧瓧锛岀粰鏂囧瓧鍔犱笂鐩稿叧鍐呭鐨勯摼鎺ワ紝鏂囧瓧灏卞彉鑹蹭簡銆2.鐐瑰嚮鈥滈〉闈㈠睘鎬р濓紝鍦ㄥ脊鍑烘閫夋嫨鈥滈摼鎺モ濄3.鈥滈摼鎺ュ瓧浣撯濄佲滃ぇ灏忊濇槸璁剧疆宸插仛鏈夐摼鎺ョ殑鏂囧瓧鐨勫瓧浣撳拰澶у皬銆傛敼鍙橀摼鎺ユ枃瀛楃殑棰滆壊鍦ㄥ悗闈⑩滈摼鎺ラ鑹测濊繖閲岃缃紝鏂囧瓧灏卞彉鍥為粦鑹蹭簡銆4.璁剧疆榧犳爣缁忚繃...
绛旓細Dreamweaver閲屾柊寤烘枃妗ｏ紝杈撳叆鏂囧瓧锛岀粰鏂囧瓧鍔犱笂鐩稿叧鍐呭鐨勯摼鎺ワ紝鏂囧瓧灏鍙樿壊浜嗐2銆佺偣鍑烩滈〉闈㈠睘鎬р濓紝鍦ㄥ脊鍑烘閫夋嫨鈥滈摼鎺モ濄3銆佲滈摼鎺ュ瓧浣撯濄佲滃ぇ灏忊濇槸璁剧疆宸插仛鏈夐摼鎺ョ殑鏂囧瓧鐨勫瓧浣撳拰澶у皬銆傛敼鍙橀摼鎺ユ枃瀛楃殑棰滆壊鍦ㄥ悗闈⑩滈摼鎺ラ鑹测濊繖閲岃缃紝鏂囧瓧灏卞彉鍥為粦鑹蹭簡銆4銆佽缃榧犳爣缁忚繃鏄枃瀛楀彉鎹㈢殑棰滆壊锛屽湪鈥滃彉鎹㈠浘...
绛旓細hover鍔ㄦ佷吉绫婚夋嫨鍣ㄣ傚湪css鏍峰紡鐨勮ˉ鍏呬腑锛宧over鍔ㄦ佷吉绫婚夋嫨鍣ㄦ晥鏋滃彲浠ヤ娇榧犳爣婊戣繃鍓嶉潰绱ц创鍏冪礌鐩爣鏃讹紝鏀瑰彉鏂囨湰棰滆壊锛屾敼鍙樺瓧浣撳ぇ灏忥紝浠庤岃Е鍙戝姩鎬佹晥鏋溿
绛旓細榧犳爣婊戣繃瀛椾綋鍙樿壊鏄竴绉嶅父瑙佺殑鏁堟灉锛屽埗浣滈紶鏍囨粦杩囧瓧浣撳彉鑹诧紝鍙互閫氳繃css鎻愪緵浜嗛紶鏍囨粦杩噃over閫夋嫨鍣ㄥ鏍峰紡杩涜淇敼銆傛搷浣滄楠ゅ涓嬶細1銆侀鍏堟墦寮html寮鍙戝伐鍏凤紝鍒涘缓涓涓猦tml鏂囦欢銆2銆佸湪html椤甸潰鎵惧埌鏍囩锛屽湪鏍囩閲岄潰杈撳叆鍐呭锛岀劧鍚庣敤鏍囩鎶婂唴瀹硅鐩栥3銆佷慨鏀规爣绛剧殑鍐呭璁剧疆棰滆壊涓鸿摑鑹层4銆佷繚瀛樺ソhtml鏂囦欢锛屼娇鐢ㄦ祻...
绛旓細1銆侀鍏堬紝鎵撳紑HTML缂栬緫鍣ㄥ苟鍒涘缓涓涓柊鐨凥TML鏂囦欢锛屾瘮濡俰ndex.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜utton {background-color: #00a7d0} button:hover {background-color: #ff7701}銆3銆佸綋娴忚鍣ㄨ繍琛岀储寮昳ndex.html椤甸潰涓紝鍑虹幇钃濊壊鑳屾櫙棰滆壊鐨勬寜閽4銆佸皢榧犳爣绉诲埌鎸夐挳涓婏紝鎸夐挳鐨勮儗鏅鑹...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜utton {background-color: #00a7d0}button:hover {background-color: #ff7701}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵樉绀哄嚭浜嗚摑鑹茶儗鏅鑹茬殑鎸夐挳銆4銆佸皢榧犳爣绉诲叆鎸夐挳锛屾鏃舵寜閽殑鑳屾櫙棰滆壊鍙樻垚浜嗘...
绛旓細1銆佸仛濂戒竴涓摼鎺 2銆佺偣鍑诲伐鍏烽潰鏉夸腑CSS妯″紡涓嬬殑鈥+鈥濓紝鎵撳紑鏂板缓CSS鏍峰紡闈㈡澘 3銆侀夋嫨鈥滃鍚鍐呭鈥濓紝閫夋嫨a:link锛岃〃绀烘甯搁摼鎺ユ椂鐨勬牱寮忋4銆佺偣鍑荤‘瀹氾紝鎵撳紑鏍峰紡璁剧疆闈㈡澘锛岄夋嫨Color:#333锛屾垨鍒殑浣犺鐨勭潃鑹诧紝纭畾銆5銆佷笅闈㈣缃榧犳爣缁忚繃鐨勬枃瀛楄壊褰╋紝杩樻槸鍙傝冪浜屾锛屾墦寮鏂板缓CSS瑙勫垯闈㈡澘锛岄夋嫨鈥滃鍚堝唴瀹...
绛旓細鍏堜笉鍋氫换浣曠殑璁剧疆锛岄瑙堢湅鐪嬫爣绛句腑鐨勫瓧浣撴儏鍐碉紝鏄粦鑹茬殑銆傛帴鐫寮濮嬭瀹鍙樿壊銆傚鍥撅紝缂栧啓涓涓猻tyle鏍囩锛岄氳繃css鏉ヨ缃榧犳爣缁忚繃鏃舵枃瀛楀彉鑹层傜劧鍚庡啓涓奷iv:hover鍔犺姳鎷彿锛屽鏋滀綘鏄叾浠栨爣绛惧氨鐢ㄥ叾浠栨爣绛惧悕鏇挎崲div鍗冲彲銆傜劧鍚庝娇鐢╟olor锛宑olor鍚庨潰琛ㄧず鐨勬槸榧犳爣缁忚繃鏃跺彉鍖栫殑棰滆壊锛屼篃灏辨槸棰滆壊鍊笺傝繖鏍凤紝璁剧疆濂戒箣鍚...
绛旓細褰榧犳爣鐐瑰嚮瀛椾笂涔嬪悗鍙樿壊鍔犵矖锛岀偣鍏朵粬鐨勫張鍙樹负鍘熸牱锛屾槸璁剧疆閿欒閫犳垚鐨勶紝瑙ｅ喅鏂规硶濡備笅锛1銆侀鍏堝氨鏄墦寮Sublime Text缂栬緫鍣紝鏂板缓涓涓狧TML椤甸潰锛屽苟娣诲姞HTML缁撴瀯锛屽涓嬪浘鎵绀恒2銆佺劧鍚庡湪body鍖哄煙娣诲姞瀛椾綋锛屾敞鎰忔斁鍦ㄤ竴涓猟iv閲岄潰锛屽涓嬪浘鎵绀恒3銆佹帴涓嬫潵灏卞彲浠ュ湪CSS涓敤font-weight杩涜鍔犵矖璁剧疆浜嗭紝鍙渶瑕佽缃...
