HTML中怎么把鼠标移动上去就换了一张图片。移动开就变回来了!是什么代码怎么书写。求告知!谢谢! 求一段HTML代码,一张图片鼠标移动到图片上,就换成另外一张...
HTML\u4e2d\u600e\u4e48\u628a\u9f20\u6807\u79fb\u52a8\u4e0a\u53bb\u5c31\u6362\u4e86\u4e00\u5f20\u56fe\u7247\u3002\u662f\u7528JS\u4e66\u5199\u7684\uff01\uff01js\u7684\u9f20\u6807\u6ed1\u8fc7\u4e8b\u4ef6 \u4f8b\u5b50:
function Bhimg(){
document.getElementById("demo").style.backgroundImage="url(2.jpg)";
}
.change
{
width:
500px;
//\u5bbd\u5ea6
height:
500px;
//\u9ad8\u5ea6
background:
url(\u8fd9\u91cc\u7528\u539f\u672c\u56fe\u94fe\u63a5\u66ff\u6362);
}
.change:hover
{
background:
url(\u8fd9\u91cc\u7528\u53d8\u5316\u540e\u7684\u56fe\u7684\u94fe\u63a5\u66ff\u6362);
<div
class="change">
\u6709\u95ee\u9898\u8ffd\u95ee\u54e6
.a {
background-image: url(xx.jpg);
}
.a:hover {
background-image: url(yy.jpg);
}
绛旓細浠g爜锛<style type="text/css"> .pointer{ cursor: pointer;} </style> 4銆鎶婇紶鏍鎸囬拡鏍峰紡娣诲姞鍒<a>鏍囩涓娿傛坊鍔犲悗鐨勪唬鐮侊細<a href="" class="pointer"> 澶у濂斤紝榧犳爣鏀惧埌鎴戣韩涓婂氨鍙湅鍒版晥鏋 </a> 5銆佷繚瀛html浠g爜鍚庝娇鐢ㄦ祻瑙堝櫒鎵撳紑锛屽綋榧犳爣婊戣繃<a>涓婄殑鏂囧瓧鍚庡嵆鍙湅鍒伴紶鏍囧彉涓轰簡鎸囬拡鐘舵併
绛旓細2鐢ㄦ柟鍚戦敭灏嗛夋嫨铏氭绉诲姩鍒板浘鏍囦笂锛屾寜鍙虫墜Ctrl宸﹁竟鐨勯敭锛屽彲浠ユ浛浠i紶鏍囧彸閿脊鍑鸿彍鍗曘3闇瑕佸畬鍏ㄦā鎷熼紶鏍囧姛鑳斤紝鍙互浣跨敤鎸夐敭绮剧伒杩欑杞欢锛屾寚瀹氶敭鐩樹笂鏌愪袱涓敭鏉ユā鎷熼紶鏍囧乏鍙抽敭銆傚畨瑁呮寜閿簿鐏典箣鍚庨粯璁ゅ甫涓涓ā鎷熼紶鏍囩偣鍑荤殑鑴氭湰锛屽彧瑕佷慨鏀逛竴涓嬪氨鑳界敤浜嗐傝繖搴旇姣旇緝瀹岀編鐨勫姙娉 璇烽棶html涓庢牱璁剧疆鎶婇紶鏍婊戣繃鍥剧墖灏变細...
绛旓細鎿嶄綔姝ラ濡備笅锛1銆侀鍏堟墦寮html寮鍙戝伐鍏凤紝鍒涘缓涓涓猦tml鏂囦欢銆2銆佸湪html椤甸潰鎵惧埌<body>鏍囩锛屽湪<body>鏍囩閲岄潰杈撳叆鍐呭锛岀劧鍚庣敤<a>鏍囩鎶婂唴瀹硅鐩栥3銆佷慨鏀<a>鏍囩鐨鍐呭璁剧疆棰滆壊涓鸿摑鑹层4銆佷繚瀛樺ソhtml鏂囦欢锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛鎶婇紶鏍鏀惧埌鏂囧瓧涓婂氨浼鍙戠幇瀛椾綋鍙樹负钃濊壊瀛椾綋銆
绛旓細1銆侀鍏堬紝鎵撳紑HTML缂栬緫鍣ㄥ苟鍒涘缓涓涓柊鐨凥TML鏂囦欢锛屾瘮濡俰ndex.html銆2銆佸湪index.html涓鐨<style>鏍囩涓紝杈撳叆css浠g爜锛歜utton {background-color: #00a7d0} button:hover {background-color: #ff7701}銆3銆佸綋娴忚鍣ㄨ繍琛岀储寮昳ndex.html椤甸潰涓紝鍑虹幇钃濊壊鑳屾櫙棰滆壊鐨勬寜閽4銆灏嗛紶鏍囩Щ鍒版寜閽笂锛屾寜閽殑...
绛旓細1銆佸埄鐢╟ss鐨:hover <div id="content"> 杩欐槸鍘熸湰鐨刣iv灞 <div id="show"> <p>杩欐槸榧犳爣绉诲姩涓婂幓鍚庣殑div灞</p> </div> </div> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ background:#0CF; height:200px; width:200...
绛旓細html涓秴閾炬帴浣跨敤鈥渉ref鏍囩鈥涓婇潰鐨勬枃瀛椾娇鐢ㄢ渢itle鏍囩鈥濓紝浣跨敤鏂瑰紡濡備笅锛<a href="瓒呴摼鎺ュ唴瀹" target="鐐瑰嚮瓒呴摼鎺ョ殑寮瑰嚭鏂瑰紡" title="鎮诞鏂囧瓧锛屽氨鏄綘榧犳爣鏀涓婂幓鎯宠鐨勫唴瀹">椤甸潰涓婅秴閾炬帴鐨勬樉绀</a> 绀轰緥濡備笅锛=== <html> <head> <meta charset="UTF-8"> <title>Html鐨瓒呴摼鎺ユ偓娴枃瀛</t...
绛旓細button:hover{color:red;/*褰撻紶鏍囨偓鍋滄椂锛屽瓧浣撻鑹插彉涓虹孩鑹*/}淇濆瓨骞堕瑙坕ndex.html鏂囦欢锛屼綘浼氱湅鍒颁竴涓甫鏈夐粦鑹插瓧浣撶殑榛樿鎸夐挳銆傚綋浣灏嗛紶鏍囩Щ鍔鍒版寜閽笂鏃讹紝瀛椾綋棰滆壊浼氬彉涓虹孩鑹诧紝杩欐牱灏卞疄鐜颁簡榧犳爣绉讳笂鍘鍚庡瓧浣撻鑹鐨鍙樺寲鏁堟灉銆傛敞鎰忥紝杩欏彧鏄竴涓熀纭绀轰緥锛屼綘鍙互鏍规嵁闇瑕佽皟鏁撮鑹层佸瓧浣撳ぇ灏忋佸瓧浣撶被鍨嬬瓑...
绛旓細1銆侀渶瑕佺粨鍚圝avaScript瀹炵幇锛岄鍏堟墦寮sublime text缂栬緫鍣紝鏂板缓涓涓html鏂囦欢锛屽啓鍏ヤ竴涓爣绛惧拰寮瑰嚭灞俤iv锛屽垎鍒缃畠浠鐨勯紶鏍囩Щ鍏ュ拰绉诲嚭浜嬩欢锛涙渶鍚庣畝鍗曠殑璁剧疆涓や釜html鏍囩鐨勬牱寮忥紝璁╁脊鍑哄眰榛樿闅愯棌锛岃缃脊鍑哄眰鐨勫ぇ灏忚儗鏅瓑灞炴э細2銆佹帴鐫鍦ㄤ笅鏂圭殑script鏍囩璁剧疆涓や釜鍑芥暟锛屼竴涓槸榧犳爣绉诲叆鏃惰Е鍙戠敤鏉ユ樉绀篸iv锛屽彟...
绛旓細鍦html鏂囦欢涓坊鍔犱竴涓簨浠讹紝灏辨槸褰撻紶鏍囨粦鍔ㄥ埌submit鎸夐挳涓婃椂锛岃缃紶鏍囨牱寮忓嵆鍙紝鍏蜂綋渚嬪瓙濡備笅锛<html><body><p>璇鎶婇紶鏍囩Щ鍔鍒板崟璇嶄笂锛屽彲浠ョ湅鍒伴紶鏍囨寚閽堝彂鐢熷彉鍖栵細</p><span style="cursor:auto">Default</span><br /><span style="cursor:pointer"> Pointer</span><br /> <!--杩欎釜灏辨槸浣...
绛旓細aa{ color:#000; text-decoration:none;} divcon{ background:#eee; padding:10px; width:150px;} --> </style> </head> <body> <a id="aa" href="#">鎴戞槸閾炬帴锛岄紶鏍囪繃鏉</a> <div id="divcon">闅愯棌鐨浠绘剰鍐呭锛榧犳爣绉鍒伴摼鎺ヤ笂鍑虹幇锛岀Щ寮鍗抽殣钘忥紒</div> </body> </html> ...