css鼠标悬停时，换图片
1首先输入代码下方的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS实现鼠标移动到图片，更换图片</title>
2、然后输入下方的代码：
</head>
<style type="text/css">
*{ margin:0; padding:0;}
ul li{ list-style:none;}
.nav{ width:800px; height:40px; margin:150px auto;}
.nav ul li{ float:left; width:200px;}
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px;
3、然后在输入下方的代码：
background:url(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/
.nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/
.nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/
</style>
<body>
<div class="nav">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>
4、然后这样就完成了。
绛旓細Dreamweaver涓彲浠ヨ嚜鍔ㄨ缃殑 宸ュ叿鏍忎腑 鈥滄彃鍏モ-鈥鍥剧墖瀵硅薄鈥-鈥榧犳爣缁忚繃鍥剧墖鈥濆鏋滄槸鐢CSS瀹炵幇鐨勮瘽锛屽彲浠ュ湪闇瑕佽缃姩鎬佹晥鏋滅殑鏍囩涓娇鐢ㄤ吉绫:hover 鍏蜂綋鎬庝箞鐢紝灏辩湅浣犲CSS鐨勬帉鎻＄▼搴︿簡銆侾S锛氳鏂规硶涓嶉傜敤浜嶪E6锛屽叾浠栫殑鍙互銆傚啀鏈夊氨鏄敤JavaScript鏉ュ疄鐜颁簡銆傚浜庡垵瀛﹁呯殑璇濓紝鐩存帴鐢―reamweaver鏉ュ疄鐜...
绛旓細婧愮爜锛<!DOCTYPE html>鍥剧墖鐑尯hover鏁堟灉 .main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} /* 瀹藉害涓庨珮搴﹀繀椤讳笌鑳屾櫙澶у浘涓鑷 */.bigImg {position: absolute; display: none; border: 1px solid #ccc;}.img1 {top: 199px; left: 153px;}.img2 {top...
绛旓細> function showA(obj){ obj.src="a.gif";} function showB(obj){ obj.src="b.gif"} 榧犳爣鏀鍥剧墖涓婃墽琛 onmouseover浜嬩欢 榧犳爣绉诲嚭鎵цonmouseout浜嬩欢
绛旓細灏鍥剧墖浣滀负鑳屾櫙鍥撅紙background-image锛変娇鐢,褰榧犳爣鏀句笂鍘伙紙hover锛夋椂鏇存敼鑳屾櫙鍥剧墖
绛旓細CSS瀹氫箟榧犳爣婊戣繃瀵艰埅鑿滃崟锛岃儗鏅彲浠ユ槸CSS瀹氫箟鐨勭函鑹诧紝涔熷彲浠ユ槸涓板瘜鑹插僵鍥炬鐨鍥剧墖锛鏂囧瓧鍒欐槸瀹炲疄鍦ㄥ湪鐨勶紝浣嗗畠鏃犳硶鍋氬埌鍙堥叿鍙堢偒锛屼絾鍏朵紭鐐规槸鏇村埄浜庢悳绱紭鍖栧拰CMS涓娇鐢ㄣ傛潵鐪嬩竴涓畝鍗曞疄渚嬶紝灏辨槸缁檃:hover(榧犳爣鎮仠)鍔犱竴涓儗鏅鑹诧紝濡備笅鍥撅細璇曚笅锛岄紶鏍囩Щ鍔ㄥ埌鈥滃鑸彍鍗曗濇枃瀛椾笂灏卞彲浠ョ湅瑙侀粍鑹茶儗鏅紝绉诲紑...
绛旓細鍙﹀github涓婃湁浜涜繖鏂归潰鐨勬彃浠讹紝妤间富鏈夐渶瑕佺殑璇濆彲浠ュ幓鐪嬬湅銆傛庝箞瀹炵幇css鐐逛腑鍥剧墖鍑虹幇鏂囧瓧鐨刪over锛熷疄鐜榧犳爣鎮仠鍦ㄥ浘鐗囦笂搴曢儴寮瑰嚭鏂囧瓧鍐呭鐨勫疄鐜版柟娉曪細HTML浠ｇ爜:text CSS浠ｇ爜锛#wrapper.text{position:relative;bottom:30px;left:0px;visibility:hidden;}#wrapper:hover.text{visibility:visible;} ...
绛旓細2銆佸湪test.html鏂囦欢鍐咃紝璁剧疆table鏍囩鐨刢lass灞炴т负mytable锛屽悓鏃惰缃竟妗嗕负1px銆3銆佹帴鐫鍦css鏍囩鍐咃紝閫氳繃class璁剧疆琛ㄦ牸鐨勬牱寮忥紝瀹氫箟瀹冪殑瀹藉害涓300px,楂樺害涓200px銆4銆佸湪css鏍囩鍐咃紝閫氳繃td鍏冪礌鍚嶇О鍜屸:hover鈥濋夋嫨鍣ㄥ畾涔夊綋榧犳爣鎸囧悜鍗曞厓鏍鏃讹紝鏀瑰彉鍗曞厓鏍肩殑鑳屾櫙棰滆壊锛岃缃负绾㈣壊銆5銆佹渶鍚庡湪娴忚鍣ㄦ墦寮...
绛旓細div.up{ width:350px; height:300px; background:#CCCCCC; overflow:hidden;}div.up img{width:100%;height:100%;}#down img{ width:60px; height:100px; opacity:0.3; filter:alpha(opacity=30);}#down img.change_image{opacity:1;filter:alpha(opacity=100)...
绛旓細浣跨敤CSS :hover 浼被鍙互杈惧埌杩欎釜鏁堟灉銆傚畾涔夊拰鐢ㄦ硶 :hover 閫夋嫨鍣ㄧ敤浜庨夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傛彁绀猴細:hover 閫夋嫨鍣ㄥ彲鐢ㄤ簬鎵鏈夊厓绱狅紝涓嶅彧鏄摼鎺ャ傛彁绀猴細:link 閫夋嫨鍣ㄨ缃寚鍚戞湭琚闂〉闈㈢殑閾炬帴鐨勬牱寮忥紝:visited 閫夋嫨鍣ㄧ敤浜庤缃寚鍚戝凡琚闂殑椤甸潰鐨勯摼鎺ワ紝:active 閫夋嫨鍣ㄧ敤浜庢椿鍔ㄩ摼鎺ャ傛敞閲婏細鍦 CSS ...
绛旓細1銆佷娇鐢css鏉ユ帶鍒跺彉鍖栵紝鍗崇粰鍥剧墖娣诲姞css鏍峰紡 2銆佸湪鍥剧墖鏍峰紡缁戝畾:hover浜嬩欢锛屾帶鍒跺浘鐗囧湪榧犳爣鎮仠鏃鍙樺寲 //瀹氫箟鍔ㄧ敾 -webkit-keyframes imgChange { 0%{border-radius:0%;} 50%{border-radius:50%;} 100%{border-radius:0%;} } img:hover{ -webkit-animation-name:imgChange;-webkit-animation-...
