css设置鼠标滑过背景变色;鼠标滑过背景变色？
很多网页中我们都看到当鼠标滑过一个内容时，这个内容的背景会改变颜色。设置鼠标滑过背景变色只需用到:hover就可以设置成功。
语法:div:hover{background-color:red;}
1.创建一个新的html文件。如图
2.在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg。如图：
代码：
绛旓細瀹炵幇榧犳爣缁忚繃鑳屾櫙鍙樿壊鐨勬柟娉曟湁寰堝锛屾柟娉曚竴锛氱洿鎺ュ啓鍦℉TML浠ｇ爜涓 html榧犳爣婊戣繃 鏂囧瓧鍙樿壊 鏂规硶浜:鍏璁剧疆鍥哄畾鐨勬牱寮忥紝鐒跺悗璋冪敤銆 .d_over{background-color:#307172;} .d_out{background-color:#EFEFEF;} 鍝堝搱鍝堝搱鍝 鏂规硶涓夈佷娇鐢ㄦ爣绛俱傝繖涔熸槸甯哥敤鐨勬柟寮 涓鑸槸鐢ㄦ潵瀹氫箟閾炬帴鐨勬牱寮忕殑锛屽苟涓嶆槸瀹氫箟鏌...
绛旓細娣诲姞榧犳爣鎮仠锛氬皢榧犳爣鎮仠鍒癇G鏍峰紡绫伙紝鐒跺悗鍦ㄩ紶鏍囨偓鍋滄椂璁剧疆鑳屾櫙棰滆壊銆備簲銆佸疄鐢ㄧ▼搴忔祻瑙堝櫒鎵撳紑銆備繚瀛楬TML骞剁敤娴忚鍣ㄦ墦寮瀹冦傚綋榧犳爣涓嶅湪Div涓婄Щ鍔ㄦ椂锛岃儗鏅槸绾㈣壊鐨勩傚綋榧犳爣鍦―iv涓婄Щ鍔ㄦ椂锛岃儗鏅粠绾㈣壊鍙樹负妫曡壊銆傚叚銆佹墍鏈変唬鐮侀兘鍙互鐩存帴澶嶅埗鍒版柊涓婚〉鐨凥TML鏂囦欢涓備繚瀛樺悗锛屽彲浠ヤ娇鐢ㄦ祻瑙堝櫒鎵撳紑瀹冧互鏌ョ湅鏁堟灉銆
绛旓細CSS Selector"鎸夐挳銆3.鍦⊿elector鏍忎腑閿叆a,鐒跺悗鐐筄K銆4.闅忓悗寮瑰嚭"CSS 鏍峰紡瀹氫箟"瀵硅瘽妗嗭紝鍦═ype绫荤殑decoration(瑁呴グ)涓紝鍕鹃塶one锛岀劧鍚庣偣OK锛屽啀鐐笵one銆備綘灏嗙珛鍒诲湪Document Windows涓彂鐜伴摼鎺ョ殑涓嬪垝绾垮凡缁忔秷澶变簡銆傞偅涔堝張鎬庢牱瀹炵幇褰榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂鏃堕摼鎺鍙樿壊鍛?閲嶅涓婅堪姝ラ涓殑鐨勭涓銆佺浜屾銆傜劧鍚...
绛旓細鏍峰紡閮ㄥ垎锛 .box1:hover{background:#dfdfdf;} html閮ㄥ垎锛氱涓绉嶆儏鍐碉紝a鏍囩灏辨槸浣滀负涓涓暣浣撶殑鐩掑瓙銆 绗簩绉嶆儏鍐碉紝a鏍囩浣滀负鐩掑瓙鐨勫瓙鍏冪礌銆 js閮ㄥ垎锛 function hover(){ document.getElementById('box2').style.background = '#dfdfdf';} function out(){ document.getElementById('box2...
绛旓細鐐瑰嚮璁㈠崟鐨勬椂鍊欙紝璁㈠崟鐨勫瓧浣棰滆壊鏀瑰彉锛岄椤靛拰浼氬憳涓績涓績鐨勫瓧浣撻鑹茶繕鍘燂紱鐐瑰嚮浼氬憳涓績鐨勬椂鍊欙紝浼氬憳涓績鐨勫瓧浣撻鑹叉敼鍙橈紝棣栭〉鍜岃鍗曠殑瀛椾綋棰滆壊杩樺師锛涘洜涓轰綘娌℃湁缁欓椤点佽鍗曞拰浼氬憳涓績鐨勫浘鐗囷紝鎵浠ユ垜涔熸病鏈夊幓鍒囧浘浠涔堢殑锛屽彧鍋氬ソ浜嗗瓧浣撻鑹茬殑鏀瑰彉锛屼綘绋嶅悗鐪嬫噦浜嗙洿鎺ュ皢鍥剧墖鑳屾櫙鐨勯鑹叉坊鍔犱笂鍘诲嵆鍙紝涓嬮潰灏辨槸鎴...
绛旓細CSS锛氬眰鍙犳牱寮忚〃(鑻辨枃鍏ㄧО锛欳ascading Style Sheets)锛屾槸涓绉嶇敤鏉ヨ〃鐜癏TML锛堟爣鍑嗛氱敤鏍囪璇█鐨勪竴涓簲鐢級鎴朮ML锛堟爣鍑嗛氱敤鏍囪璇█鐨勪竴涓瓙闆嗭級绛夋枃浠舵牱寮忕殑璁＄畻鏈鸿瑷銆侰SS涓嶄粎鍙互闈欐佸湴淇グ缃戦〉锛岃繕鍙互閰嶅悎鍚勭鑴氭湰璇█鍔ㄦ佸湴瀵圭綉椤靛悇鍏冪礌杩涜鏍煎紡鍖栥侰SS 鑳藉瀵圭綉椤典腑鍏冪礌浣嶇疆鐨勬帓鐗堣繘琛屽儚绱犵骇绮剧‘鎺у埗锛...
绛旓細3銆佺敤榧犳爣閫夊彇鏁翠釜琛ㄦ牸,鍦ㄥ睘鎬ф诞鍔ㄩ潰鏉夸腑濡備笅璁剧疆:CellSpace:0;Border:0;Bg Color:#000000( 杩欎釜棰滆壊鍙互鏍规嵁闇瑕佹洿鏀)銆 4銆佺敤榧犳爣閫夊彇鎵鏈夎〃鏍煎崟鍏冩牸,鎶婂睘鎬ф诞鍔ㄩ潰鏉跨殑鍙傛暟Bg璁句负#ffffff,杩欎釜棰滆壊璁句负搴斾负浣犻〉闈㈢殑鑳屾櫙鑹茬浉鍚,濡傛灉浣犵殑鑳屾櫙鑹蹭负榛勮壊,杩欎釜棰滆壊涔熷簲璇ユ槸榛勮壊,璇曚竴璇曞氨鐭ラ亾浜嗐 缁忛獙(涓):琛ㄦ牸涓í绾...
绛旓細鐜板湪鎴戞棤璁烘槸鍦ㄩ粯璁ょ姸鎬佷笅銆榧犳爣绉讳笂鍘绘椂銆侀紶鏍囩偣鍑绘椂锛屾垨鏄偣鍑昏繃鍚庯紝a鏍囩鑳屾櫙棰滆壊閮戒細淇濇寔鍦ㄥ垵濮嬬姸鎬侊紝涓嶄細鏀瑰彉銆傚鏋滈渶瑕侀紶鏍囩Щ涓婂幓鏃讹紝鑳屾櫙鍙樿壊锛岄偅灏卞姞澶氫竴鏉:hover锛屽啓娉曞涓嬶細dh ul li a:hover{ display:block;background:#0193de;width:125px;height:43px;} 鐜板湪灏卞彧鏈夐紶鏍囩Щ涓婂幓鏃惰儗鏅...
绛旓細4銆佸湪css鏍囩鍐咃紝鍐嶅畾涔変竴涓被鍚嶄负newbg鐨勬牱寮忥紝浣跨敤background灞炴璁剧疆鑳屾櫙棰滆壊涓洪粍鑹层5銆佸湪test.html鏂囦欢涓紝缁檇iv缁戝畾onmouseover榧犳爣绉诲姩浜嬩欢锛屽綋榧犳爣绉诲姩鑷砫iv鏃讹紝鎵цmyfun锛堬級鍑芥暟銆6銆佸湪test.html鏂囦欢涓紝鍦╦s鏍囩鍐咃紝鍒涘缓涓涓猰yfun锛堬級鍑芥暟锛屽湪鍑芥暟鍐咃紝浣跨敤getElementById锛堬級鑾峰緱div瀵硅薄锛岄氳繃...
绛旓細浣跨敤浼被 :hover{background-color:#f00;} 渚嬪浣犺缁欎竴涓猟iv 鏍囩璁剧疆榧犳爣鎮诞涓婂幓鏀瑰彉鑳屾櫙锛css鏍峰紡锛.box{background-color:#0f0;} //璁剧疆div鐨勮儗鏅鑹 .box:hover{background-color:#f00;} //璁剧疆榧犳爣鎮诞涓婂幓鏃剁殑鑳屾櫙鎰忔 html鍐呭锛氶紶鏍囨偓娴敼鍙樿儗鏅 ...
