网页中如何实现鼠标放在按钮上与不在按钮上的特效的不一样。代码是什么
\u7f51\u9875\u5236\u4f5c\u4e2d \u5f53\u9f20\u6807\u653e\u5728button\u6309\u94ae\u4e0a\u65f6 \u6309\u94ae\u989c\u8272\u6539\u53d8 \u5982\u4f55\u5b9e\u73b0\uff1f\u63d2\u5165\u4ee3\u7801button\u5373\u53ef\u5b9e\u73b0\u3002
Button \u9f20\u6807\u4e0a\u7684\u4e00\u4e2a\u6d3b\u52a8\u7247\uff0c\u7528\u4e8e\u6fc0\u6d3b\u4e00\u4e9b\u529f\u80fd\u3002\u65e7\u5f0f\u7684\u9f20\u6807\u6a21\u578b\u53ea\u6709\u4e00\u4e2a\u6309\u94ae;\u65b0\u5f0f\u4e00\u822c\u6709\u4e24\u4e2a\u6216\u66f4\u591a\u4e2a\u6309\u94ae
\u3010\u82f1\u3011On a mouse, amovable piece that is pressed to activate some function. Older mouse models have only one button; newer modelstypically have two or more.
html\u6807\u7b7e
HTML \u6807\u7b7e
\u5b9a\u4e49\u548c\u7528\u6cd5
\u6807\u7b7e\u5b9a\u4e49\u4e00\u4e2a\u6309\u94ae\u3002
\u5728 button \u5143\u7d20\u5185\u90e8\uff0c\u60a8\u53ef\u4ee5\u653e\u7f6e\u5185\u5bb9\uff0c\u6bd4\u5982\u6587\u672c\u6216\u56fe\u50cf\u3002\u8fd9\u662f\u8be5\u5143\u7d20\u4e0e\u4f7f\u7528 input \u5143\u7d20\u521b\u5efa\u7684\u6309\u94ae\u4e4b\u95f4\u7684\u4e0d\u540c\u4e4b\u5904\u3002
\u63a7\u4ef6 \u4e0e \u76f8\u6bd4\uff0c\u63d0\u4f9b\u4e86\u66f4\u4e3a\u5f3a\u5927\u7684\u529f\u80fd\u548c\u66f4\u4e30\u5bcc\u7684\u5185\u5bb9\u3002 \u4e0e \u6807\u7b7e\u4e4b\u95f4\u7684\u6240\u6709\u5185\u5bb9\u90fd\u662f\u6309\u94ae\u7684\u5185\u5bb9\uff0c\u5176\u4e2d\u5305\u62ec\u4efb\u4f55\u53ef\u63a5\u53d7\u7684\u6b63\u6587\u5185\u5bb9\uff0c\u6bd4\u5982\u6587\u672c\u6216\u591a\u5a92\u4f53\u5185\u5bb9\u3002
\u4f8b\u5982\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u6309\u94ae\u4e2d\u5305\u62ec\u4e00\u4e2a\u56fe\u50cf\u548c\u76f8\u5173\u7684\u6587\u672c\uff0c\u7528\u5b83\u4eec\u5728\u6309\u94ae\u4e2d\u521b\u5efa\u4e00\u4e2a\u5438\u5f15\u4eba\u7684\u6807\u8bb0\u56fe\u50cf\u3002
\u552f\u4e00\u7981\u6b62\u4f7f\u7528\u7684\u5143\u7d20\u662f\u56fe\u50cf\u6620\u5c04\uff0c\u56e0\u4e3a\u5b83\u5bf9\u9f20\u6807\u548c\u952e\u76d8\u654f\u611f\u7684\u52a8\u4f5c\u4f1a\u5e72\u6270\u8868\u5355\u6309\u94ae\u7684\u884c\u4e3a\u3002
\u8bf7\u59cb\u7ec8\u4e3a\u6309\u94ae\u89c4\u5b9a type \u5c5e\u6027\u3002Internet Explorer \u7684\u9ed8\u8ba4\u7c7b\u578b\u662f "button"\uff0c\u800c\u5176\u4ed6\u6d4f\u89c8\u5668\u4e2d(\u5305\u62ec W3C \u89c4\u8303)\u7684\u9ed8\u8ba4\u503c\u662f "submit"\u3002
\u5b9e\u4f8b
function whichButton(event)
{
if (event.button==2)
{
alert"You clicked the right mouse button!")
}
else
{
alert"You clicked the left mouse button!")
}
}
Click in the document. An alert box will
alert which mouse button you clicked.
\u5f88\u591a\u79cd\u65b9\u6cd5\u3002\u7528CSS\u53ef\u4ee5\u5b9e\u73b0\uff0c\u7528JS\u4e5f\u53ef\u4ee5\u5b9e\u73b0\u3002\u4e3b\u8981\u770b\u4f60\u662f\u60f3\u5b9e\u73b0\u4e2a\u4ec0\u4e48\u4e1c\u897f\u3002\u5982\u679c\u662f\u66ff\u6362\u80cc\u666f\u56fe\u7247\u7684\u8bdd\uff0c\u7528CSS\u7684\u8bdd\uff0c\u90a3\u5c31 \u4fee\u6539:hover\u91cc\u7684\u80cc\u666f\u56fe\u7247\u3002so easy\uff01\u7b80\u5355\u7684\u5f88\u3002
CSS
a { background-image:url(1.jpg);}a:hover { background-image:url(2.jpg);}
JS
$(".Demo").mouseover($(this).css("background-image","1.jpg"));$(".Demo").mouseout($(this).css("background-image","2.jpg"));
我家用的是 Macromedia Dreamweaver 8
步骤：插入→图像对象→鼠标经过图像
把原始<图像>和<鼠标经过图像>输入好，按确定就行了~
当鼠标经过的时候把按钮的背景图片换到，鼠标离开的时候把背景换回来
<input type="button" onmouseover="this.style.background='red'" onmouseout="this.style.background='blue'" value="press"/>
red和blue换成图片路径或者颜色都行
绛旓細鎶婂師濮<鍥惧儚>鍜<榧犳爣缁忚繃鍥惧儚>杈撳叆濂斤紝鎸夌‘瀹氬氨琛屼簡~
绛旓細鎻掑叆浠ｇ爜button鍗冲彲瀹炵幇銆Button 榧犳爣涓鐨勪竴涓椿鍔ㄧ墖锛岀敤浜庢縺娲讳竴浜涘姛鑳姐傛棫寮忕殑榧犳爣妯″瀷鍙湁涓涓鎸夐挳;鏂板紡涓鑸湁涓や釜鎴栨洿澶氫釜鎸夐挳 銆愯嫳銆慜n a mouse, amovable piece that is pressed to activate some function. Older mouse models have only one button; newer modelstypically have two or more.htm...
绛旓細1//鎹㈡垚鐩稿搴旂殑椤甸潰鍦板潃23var p=document.getElementsByTagName("iframe");function show(n){p[0].src=n;}
绛旓細("button").mouseover(function(){ var site = Math.random()*(1000-100)+100;(this).css({ "top":site+"px","left":site+"px"})})澶ф鏄繖鏍凤紝鍙互鑷繁鐞㈢（涓涓
绛旓細鍦╤tml鏂囦欢涓坊鍔犱竴涓簨浠讹紝灏辨槸褰撻紶鏍囨粦鍔ㄥ埌submit鎸夐挳涓婃椂锛岃缃紶鏍囨牱寮忓嵆鍙锛屽叿浣撲緥瀛愬涓嬶細璇锋妸榧犳爣绉诲姩鍒板崟璇嶄笂锛屽彲浠ョ湅鍒伴紶鏍囨寚閽堝彂鐢熷彉鍖栵細Default Pointer <!--杩欎釜灏辨槸浣犻渶瑕佺殑--> Movee-resizene-resize nw-resizetext
绛旓細鍦╤tml鏂囦欢涓坊鍔犱竴涓簨浠讹紝灏辨槸褰榧犳爣婊戝姩鍒皊ubmit鎸夐挳涓鏃讹紝璁剧疆榧犳爣鏍峰紡鍗冲彲锛屽叿浣撲緥瀛愬涓嬶細璇锋妸榧犳爣绉诲姩鍒板崟璇嶄笂锛屽彲浠ョ湅鍒伴紶鏍囨寚閽堝彂鐢熷彉鍖栵細Default Pointer <!--杩欎釜灏辨槸浣犻渶瑕佺殑--> Movee-resizene-resize nw-resizetext
绛旓細鍦–SS涓紝浣犲彲浠ラ氳繃绠鍗曠殑鏍峰紡璁剧疆瀹炵幇榧犳爣鎮仠鏃跺瓧浣撻鑹茬殑鍙樺寲銆備互涓嬫槸濡備綍鎿嶄綔鐨勬楠わ細棣栧厛锛屼粠澶村紑濮嬶紝鎵撳紑浣犵殑HTML缂栬緫鍣紝鏂板缓涓涓枃浠讹紝渚嬪鍙畠"index.html"銆傚湪index.html鐨勯儴鍒嗭紝娣诲姞鏍囩锛岃繖鏄瓨鏀綜SS浠ｇ爜鐨勫湴鏂广傚湪杩欓噷锛屼綘鍙互涓哄瓧浣撻鑹茶缃竴涓熀纭鏍峰紡銆傛瘮濡傦紝浣犲彲浠ヨ繖鏍峰啓锛button{color:...
绛旓細寰堝绉嶆柟娉曘傜敤CSS鍙互瀹炵幇锛岀敤JS涔熷彲浠ュ疄鐜般備富瑕佺湅浣犳槸鎯冲疄鐜颁釜浠涔堜笢瑗裤傚鏋滄槸鏇挎崲鑳屾櫙鍥剧墖鐨勮瘽锛岀敤CSS鐨勮瘽锛岄偅灏 淇敼:hover閲岀殑鑳屾櫙鍥剧墖銆俿o easy锛佺畝鍗曠殑寰堛侰SS a { background-image:url(1.jpg);}a:hover { background-image:url(2.jpg);} JS (".Demo").mouseover($(this).css(...
绛旓細1. 閫氳繃缂栧啓JavaScript鎴杍Query鑴氭湰锛屽彲浠ュ湪榧犳爣鎮仠(onmouseover)鏃舵樉绀轰竴涓挱鏀鎸夐挳灞(div)锛岃屽湪榧犳爣绉诲紑(onmouseout)鏃堕殣钘忚鎸夐挳灞傘2. 鍒╃敤CSS鐨:hover浼被锛屽彲浠ュ湪榧犳爣鎸囬拡鎮仠鍦ㄥ厓绱犱笂鏃朵负璇ュ厓绱犳坊鍔犵壒瀹氱殑鏍峰紡銆備互涓嬫槸涓涓畝鍗曠殑CSS瀹炵幇妗堜緥锛屽畠灞曠ず浜嗗浣曞湪榧犳爣鎮仠鍦ㄥ浘鐗囦笂鏃舵樉绀烘挱鏀惧浘鏍囷細```...
绛旓細1.鏈甯歌鐨勬槸鐢ㄥ湪鍙偣鍑诲厓绱犳垨鑰缃戦〉閾炬帴涓婏紝甯歌涓虹綉鍧榧犳爣鎮仠鏄剧ず涓嬪垝绾裤鎸夐挳/鍥炬爣鎮仠鏀瑰彉棰滆壊绛夌姸鎬侊紝鑻ユ槸material design椋庢牸浼氬父灏嗛紶鏍囬変腑鐨勫崱鐗囧姞閲嶉槾褰憋紝浣垮崱鐗囨湁涓婃诞鐨勬劅瑙夈傛湁浜涘浘鏍囩殑榧犳爣鎮诞浼氬嚭鐜皌ips鏉ユ彁绀烘寜閽殑鍚箟鎴栬呬綔鐢ㄣ傚皢鐢ㄦ埛鐨勯紶鏍囩Щ鍔ㄨ涓哄嵆鏃跺弽棣堬紝浠ユ彁绀轰汉浠変腑浜嗗彲鐐瑰嚮鐨勫厓绱...
