如何CSS的a:hover完成替换背景图片？
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{height: 80px; background: url(small3.png)}div:hover{background: url(small2.png)}。
3、浏览器运行index.html页面，此时div显示的背景图片是small3.png。
4、将鼠标移入div，此时背景图片自动变更成了small2.png。
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{height: 80px; background: url(small3.png)}div:hover{background: url(small2.png)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv鏄剧ず鐨勮儗鏅浘鐗囨槸small3.png銆4銆佸皢榧犳爣绉诲叆div锛屾鏃...
绛旓細css鐨閫夋嫨绗﹀彧鑳芥槸浠庣埗鍒板瓙锛屼粠涓婂埌涓嬬殑椤哄簭銆傚彧鏈夊綋b鍏冪礌鏄痑鍏冪礌涓嬮潰鐨勫厔寮熷厓绱狅紝鎴栬卋鍏冪礌鏄痑鍏冪礌鐨勫瓙鍏冪礌鐨勬儏鍐垫墠鑳藉疄鐜伴紶鏍囩Щ鍒癆涓婏紝A鍙樼孩锛孊鍙樿摑銆<style type="text/css">.a:hover { background-color: #f00; }.a:hover~.b { background-color: #00f; }</style></head><body>...
绛旓細渚嬪瓙涓锛氶夋嫨鏈闂佸凡璁块棶銆佹偓娴拰娲诲姩閾炬帴锛屽苟璁剧疆瀹冧滑鐨勬牱寮忥細a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} 渚嬪瓙浜岋細渚嬪瓙 2 涓洪摼鎺ヨ缃笉鍚岀殑鏍峰紡锛歛.ex1:hover,a.ex1:active {color:red;} a.ex2:hover,a.ex2:active {font...
绛旓細1-鏄仛涓ゅ紶鍥撅紝涓寮犱笂鏈夐伄缃╋紝涓寮犳槸姝ｅ父鐨勫浘 2-涓涓猘鏍囩閲岋紝鏀句竴涓殣钘忕殑閫忔槑灞傦紝hover鏃舵帶鍒跺眰鐨勬樉绀洪殣钘 demo濡備笅锛<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <style type="text/css" media="screen"> {margin:0;padding:0;} .clear {clear...
绛旓細璺熷畾涔夐摼鎺ヨ繛鏍峰紡涓鏍凤紝閫氳繃a:hover鏉ュ疄鐜板氨鍙互锛岃繖涓〃绀哄綋榧犳爣绉诲姩鍒拌繖涓厓绱犱笂鏃舵樉绀虹殑鏍峰紡锛歛 {color:#FF0;}a:hover {color:#F00;}閿氱偣浠ｇ爜锛<a name="m1">閿氱偣1</a> 涓婇潰鐨勬柟寮忔槸涓嶅尯鍒嗛敋鐐圭殑瓒呴摼鎺ョ殑锛屽鏋滆鍖哄垎锛屽彲鑳戒负閿氱偣澧炲姞涓涓壒瀹氭牱寮忥紝瀵瑰簲鐨CSS鍜岄敋鐐瑰啓娉曞涓嬶細CSS锛.anchor...
绛旓細:hover 閫夋嫨鍣ㄩ傜敤浜庢墍鏈夊厓绱犵敤娉1锛氳繖涓〃绀虹殑鏄細褰撻紶鏍囨偓娴湪a杩欎釜鏍峰紡涓婄殑鏃跺欙紝a鐨勮儗鏅鑹茶缃负榛勮壊a:hover { background-color:yellow; }杩欎釜鏄渶鏅氱殑鐢ㄦ硶浜嗭紝鍙槸閫氳繃a鏀瑰彉浜唖tyle鐢ㄦ硶2:浣跨敤a 鎺у埗鍏朵粬鍧楃殑鏍峰紡锛氫娇鐢╝鎺у埗a鐨勫瓙鍏冪礌 b锛 .a:hover .b { background-color:blue; }...
绛旓細a:hover 璁剧疆榧犳爣缁忚繃css鏍峰紡 渚嬪锛氣滅櫨搴︹濊閾炬帴锛屾湰娌℃湁涓嬪垝绾匡紱瀛椾綋棰滆壊涓洪粦鑹诧紱瀛楀彿12px銆傝缃閾炬帴锛岄紶鏍囩粡杩囨椂锛屾樉绀轰笅鍒掔嚎锛涘瓧浣撻鑹茶缃负钃濊壊锛屽瓧鍙峰鍔犱竴鍊24px銆<html> <head> <style type="text/css"> a{ font-size:12px;color:#000000;text-decoration:none;} a:hover{ font-...
绛旓細鍗曠函鍙css鍋氫笉鍒拌繖涓姹傦紝hover鐨勪娇鐢ㄦ柟娉曞涓嬶細<head><title></title> <style type="text/css"> a:link{color: #F00;} a:visited{color: #00F;} a:hover{color: #0F0;} a:active{color: #FF0;}</style></head><body> <p style="color:#399"><a href="#...
绛旓細1銆佸姞浜嗚秴绾ч摼鎺ユ敼鍙橀鑹诧紝闇鐢a:hover 2銆佸彲鏄綘绗簩寮犳埅鍥句腑css涓骞舵病鏈夊啓a:hover锛岀敤鐨勫彧鏄痟over銆3銆佹纭啓娉曪細a.green-color:hover{ }
绛旓細鎮ㄥソ锛1.杩愮敤鍒版寚瀹氱殑DIV 鍙互杩欎箞鍐 #div a:hover 鎴栬.div a:hover 銆2.杩欐牱灏卞彲浠ュ姞涓婅竟妗嗕簡 a:hover{ border:solid 1px red;} 涓嶆噦鐨勫彲浠ョ户缁棶鎴戯紒甯屾湜瀵规偍鏈夊府鍔╋紒
