CSS中如何让鼠标经过时显示背景图片 css效果：鼠标经过行时，背景图片改变
\u5982\u4f55\u7528CSS\u6837\u5f0f\u6765\u5b9e\u73b0\u5f53\u9f20\u6807\u653e\u4e0a\u53bb\u65f6\u4f1a\u51fa\u73b0\u53e6\u4e00\u5f20\u80cc\u666f\u56fe\u7247\u5462\u505a\u597d\u51c6\u5907\u5de5\u4f5c\uff0c\u628a\u4e24\u5f20100px X 100px\u7684\u56fe\u7247\u5408\u6210 100 X 200 \u7684\u3002\u901a\u8fc7CSS\u56fe\u7247\u5b9a\u4f4d\u6765\u8fbe\u5230\u5207\u6362\u6548\u679c\u3002\u5b58\u653e\u5728\u6839\u76ee\u5f55 img\tupian.gif
#div_1{width:100px;height:100px;margin:0;padding:0;} \u5b9a\u4e49\u4e00\u4e2aDIV\u65b9\u6846
#div_1 ul,li{list-style:none;margin:0px;padding:0px;} \u5b9a\u4e49div_1\u4e2dUL,LI
#div_1 li{float:left;margin:0;}
#div_1 a{
background:url(img/tupian.gif) no-repeat;width:100px;height:100px;display:block;
} \u5b9adiv_1\u4e2d\u94fe\u63a5\u80cc\u666f\u6837\u5f0f\u7b49
#a1 a:hover,#a1 a:active{
background-position: 0px -100px;height:100px;
} \u5b9a\u4e49\u4e00\u4e2a\u9f20\u6807\u60ac\u505c\u72b6\u6001
\u5728BODY\u4e2d
\u9996\u9875
obj.rows[i].onmouseover=function(){this.style.background="url(\u4f60\u7684\u56fe\u7247\u8def\u5f84)";} \u6bd4\u5982 obj.rows[i].onmouseover=function(){this.style.background="url(../images/header-title_new.gif)";}
通常可以使用css样式的 :hover 选择器， 如示例div1。
也可以使用js来控制css样式，用js可以灵活加入其它效果(延迟显示、随机背景图)， 如示例div2。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1{
width: 150px;
height: 150px;
}
.d1:hover{ /*在这里使用hover 来改变背景图 */
background:url(2531170_142659950000_2.jpg);
}
.d2{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="d1">
div1
</div>
<div class="d2" onmouseover="showbg(this)" onmouseout="hidebg(this)"> <!--分别设置了鼠标进入、离开的事件 -->
div2
</div>
</body>
<script>
function showbg(e){
e.style.background="url(2531170_142659950000_2.jpg)"; //用javascript来改变背景图片样式
}
function hidebg(e){
e.style.background="none";
}
</script>
</html>
*具体选择根据需要灵活应用
*注意示例图片要引用正确
绛旓細閫氬父鍙互浣跨敤css鏍峰紡鐨 :hover 閫夋嫨鍣, 濡傜ず渚媎iv1銆 涔熷彲浠ヤ娇鐢╦s鏉ユ帶鍒禼ss鏍峰紡,鐢╦s鍙互鐏垫椿鍔犲叆鍏跺畠鏁堟灉(寤惰繜鏄剧ず銆侀殢鏈鸿儗鏅浘), 濡傜ず渚媎iv2銆 绀轰緥浠ｇ爜: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html>...
绛旓細璁剧疆榧犳爣婊戣繃div鏃惰儗鏅彉鑹层傜粰bg鏍峰紡绫绘坊鍔犻紶鏍囨粦杩囷細hover锛岀劧鍚庤缃紶鏍囨粦杩囨椂鐨勮儗鏅鑹銆傚鍥 浠ｇ爜锛 .bg:hover{ background-color: burlywood; } 瀹炵敤娴忚鍣ㄦ墦寮銆備繚瀛樺ソhtml鍚庝娇鐢ㄦ祻瑙堝櫒鎵撳紑锛屽湪榧犳爣娌℃湁婊戣繃div鏃惰儗鏅槸绾㈣壊鐨勶紝褰撻紶鏍囨粦杩嘾iv鐨勬椂鍊欒儗鏅粠绾㈣壊鍙樹负浜嗘鑹层傘佹墍鏈変唬鐮侊紝鍙妸鎵鏈変唬鐮...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歜utton {background-color: #00a7d0}button:hover {background-color: #ff7701}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鏄剧ず鍑轰簡钃濊壊鑳屾櫙棰滆壊鐨勬寜閽4銆灏嗛紶鏍绉诲叆鎸夐挳锛屾鏃舵寜閽殑鑳屾櫙棰滆壊鍙樻垚浜嗘鑹层
绛旓細鍔犲叆css浠ｇ爜 li:hover { background-color:#ffffcc;} 琛ㄧず榧犳爣绉诲埌li涓婃椂锛岃儗鏅彉涓#ffffcc
绛旓細action 锛堝湪榧犳爣鐐瑰嚮涓庨噴鏀句箣闂村彂鐢熺殑浜嬩欢鏃剁殑鏍峰紡锛塿isited 锛堝凡缁忚璁块棶杩囩殑閾炬帴鐨勬牱寮忥級鍥涗釜浼被瀹氫箟鏃堕渶瑕佹寜浠ヤ笂椤哄簭鏉ワ紝鍚﹀垯浼氬彂鐢熼敊璇備綘鎵璇寸殑灏辨槸鐜拌薄灏辨槸hover鏃跺嚭鐜扮殑鎯呭喌銆備妇涓緥瀛 鍏堝畾涔夊ソ鏍峰紡:a:hover {background-color:green;} //榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂鏃惰儗鏅彉涓虹豢鑹 鍦╤tml浠ｇ爜涓煡鐪...
绛旓細:active 閫夋嫨鍣ㄧ敤浜庢椿鍔ㄩ摼鎺ャ傛敞閲婏細鍦 CSS 瀹氫箟涓紝:hover 蹇呴』浣嶄簬 :link 鍜 :visited 涔嬪悗锛堝鏋滃瓨鍦ㄧ殑璇濓級锛岃繖鏍锋牱寮忔墠鑳界敓鏁堛傚疄渚 div{background-color:grern;}div:hover{ background-color:yellow;}/*褰榧犳爣鎮诞鍒癲iv涓婃柟鏄紝灏嗚儗鏅鑹叉洿鏀逛负榛勮壊*/ ...
绛旓細榛樿鑳屾櫙锛.bg{background-color:#FFF; border:1px solid #000;} 榧犳爣缁忚繃锛歛:hover{background-color:#d6d6d6; border:1px solid #000;} 鐐瑰嚮锛歛:active {background-color:#929292; border:1px solid #000;} 鐐瑰嚮鍚庯細a:visited {background-color:#929292; border:1px solid #000;} ...
绛旓細1銆佹柊寤轰竴涓猦tml鏂囦欢锛屽懡鍚嶄负test.html銆2銆佸湪test.html鏂囦欢涓紝浣跨敤div鏍囩鍒涘缓涓涓ā鍧楋紝骞惰缃叾id灞炴т负tid锛屼笅闈㈠皢閫氳繃璇d璁剧疆鍏禼ss鏍峰紡銆3銆鍦╟ss鏍囩鍐咃紝瀵筪iv杩涜鏍峰紡璁剧疆锛屼娇鐢╳idth灞炴ц缃甦iv鐨勫搴︿负200px锛屼娇鐢╤eight灞炴ц缃甦iv鐨勫搴︿负20px锛屼娇鐢╞ackground灞炴ц缃甦iv鐨勮儗鏅鑹蹭负绾㈣壊銆4...
绛旓細鍋氬ソ鍑嗗宸ヤ綔锛屾妸涓ゅ紶100px X 100px鐨勫浘鐗囧悎鎴 100 X 200 鐨勩傞氳繃CSS鍥剧墖瀹氫綅鏉ヨ揪鍒板垏鎹㈡晥鏋溿傚瓨鏀惧湪鏍圭洰褰 img\tupian.gif div_1{width:100px;height:100px;margin:0;padding:0;} 瀹氫箟涓涓狣IV鏂规 div_1 ul,li{list-style:none;margin:0px;padding:0px;} 瀹氫箟div_1涓璘L,LI div_1 ...
绛旓細 瀛椾綋 css .test a{ width:100px; height:30px; background:red; color:#fff; display:block} .test a:hover{ background:#acddde; color:red}
