HTML中怎么使鼠标悬停在图片上，使图片变大？求代码解释。 html求鼠标放到图片上，图片就放大的代码
html\u9f20\u6807\u60ac\u6d6e\u56fe\u7247\u53d8\u5927\u600e\u4e48\u5b9e\u73b0onmouseover="" onmouseout=""\u5c31\u8fd9\u4e24\u4e2a\u65b9\u6cd5
<!DOCTYPE html>
<head>
<script>
window.onload = function(){
var img = document.getElementById("imgTest");
if (document.addEventListener){
img.addEventListener("mouseover",doMouseover,false);
img.addEventListener("mouseout",doMouseout,false);
}
else if(document.attachEvent){
img.attachEvent("mouseover",doMouseover);
img.attachEvent("mouseout",doMouseout);
}
else{
img.onmouseover = doMouseover;
img.onmouseout = doMouseout;
}
}
function doMouseover(){
this.width = this.width * 1.5;
this.height = this.height * 1.5;
}
function doMouseout(){
this.width = this.width / 1.5;
this.height = this.height / 1.5;
}
</script>
</head>
<body>
<img id = "imgTest" src = "img/barcode.jpg"/>
</body>
</html>
设置鼠标经过行为，换图片即可
给你一个网站，懒人图库里面有代码的！
绛旓細1. 閫氳繃缂栧啓JavaScript鎴杍Query鑴氭湰锛屽彲浠ュ湪榧犳爣鎮仠(onmouseover)鏃舵樉绀轰竴涓挱鏀炬寜閽眰(div)锛岃屽湪榧犳爣绉诲紑(onmouseout)鏃堕殣钘忚鎸夐挳灞傘2. 鍒╃敤CSS鐨:hover浼被锛屽彲浠ュ湪榧犳爣鎸囬拡鎮仠鍦ㄥ厓绱犱笂鏃朵负璇ュ厓绱犳坊鍔犵壒瀹氱殑鏍峰紡銆備互涓嬫槸涓涓畝鍗曠殑CSS瀹炵幇妗堜緥锛屽畠灞曠ず浜嗗浣曞湪榧犳爣鎮仠鍦ㄥ浘鐗囦笂鏃舵樉绀烘挱鏀惧浘鏍囷細```...
绛旓細1銆佸噯澶囧垏鎹鍥剧墖绱犳潗锛屼竴鑸槸涓ゅ紶锛屽鍥撅紝鏀惧叆img鏂囦欢澶癸紝璺HTML鍚岀骇銆1銆傚噯澶囧垏鎹㈠浘鐗囩礌鏉愶紝涓鑸槸涓や釜锛屽鍥撅紝鏀惧湪img鏂囦欢澶閲锛屽拰HTML涓涓骇鍒2銆佺劧鍚庣敤img宓屽叆鍒扮綉椤碉紝宓屽叆鍏朵腑鐨勪竴寮狅紝鍙﹀涓寮犲緟浼氬垏鎹2.鐒跺悗鐢╥mg宓屽叆鍒扮綉椤典腑锛屽祵鍏ュ叾涓竴涓紝浠ュ悗鍐嶅垏鎹㈠彟涓涓3.濡傚浘锛岀幇鍦ㄦ槸闈欐鐨锛榧...
绛旓細<img src="璺緞" title="DREAM" alt=""/> title鍔犱笢瑗垮氨琛屼簡
绛旓細鏁堟灉濡備笅鍥撅細褰撻紶鏍囨偓鍋滃湪灏忓浘鐗囦笂闈㈢殑鏃跺欙紝浼氭樉绀哄ぇ鍥剧墖锛涢紶鏍囩Щ鍑猴紝闅愯棌澶у浘鐗銆傞棶棰橈細瀹氫綅闇瑕佽鑰呰嚜宸卞幓瀹炵幇涓涓嬪惂锛屽伔鎳掍簡銆傛劅璋㈡ゼ涓婂垎浜!<!doctype html><html><head><meta charset=utf-8></head><body>浣犺鏄剧ず鐗规晥鐨刪tml <img src="灏忓浘鐗.jpg" width="200px" height="200px" id=...
绛旓細zip|1銆佺敤鑴氭湰锛坖s鎴杍query锛夊疄鐜帮細onmouseover鐨勬椂鍊欐樉绀烘挱鏀炬寜閽眰(div),onmouseout鐨勬椂鍊欏啀闅愯棌鎾斁鎸夐挳灞銆2銆佺敤css瀹炵幇锛:hover 浼被鍦ㄩ紶鏍囩Щ鍒板厓绱犱笂鏃跺悜姝ゅ厓绱犳坊鍔犵壒娈婄殑鏍峰紡銆傚涓嬫槸鎴戝仛鐨勪竴涓皬妗堜緥(css瀹炵幇)锛屾瘮杈冪畝鍗曪紝鎻愪緵涓绉嶆濊矾銆傘愭簮浠ｇ爜瑙侀檮浠讹紝浠呬緵瀛︿範鍙傝冧娇鐢ㄣ戙
绛旓細body>div{margin:0 auto} div {text-align:left} a img {border:0} body { color: #333; text-align: center; font: 12px "寰蒋闆呴粦"; } ul, ol, li {list-style-type:none;vertical-align:0} a {outline-style:none;color:#535353;text-decoration:none} a:hover { color: #D...
绛旓細鏂囧瓧涓嶆竻妤氾紝鎴戜滑鍔犱笂鑳屾櫙鍜屽瓧浣撻鑹诧紝骞堕傚綋鐨璁剧疆涓涓嬮忔槑銆傜粰.img-tip娣诲姞濡備笅浠ｇ爜锛3. 榧犳爣鎮诞鐗规晥鐜板湪闈欐佹晥鏋滃凡缁忓畬鎴愪簡锛屾帴涓嬫潵锛屽姞涓涓嬮紶鏍囨偓娴嚭鐜版枃鏈殑鏁堟灉锛岀幇鍦.img-tip娣诲姞濡備笅浠ｇ爜锛岃鏂囨湰榛樿闅愯棌锛氬啀鍔犱笂榧犳爣鎮仠鍦ㄥ浘鐗涓婏紝鏄剧ず鏂囨湰鐨勪唬鐮侊細浠ｇ爜鎬绘眹HTML <div class="img-group"> <...
绛旓細DOCTYPE html><head><script>window.onload = function(){ var img = document.getElementById("imgTest"); if (document.addEventListener){ img.addEventListener("mouseover",doMouseover,false); img.addEventListener("mouseout",doMouseout,false); } else if(document.attachEvent){ img....
绛旓細鍏蜂綋鎿嶄綔鏄鍏堟柊寤轰竴涓猦tml鏂囦欢锛屽啓鍏ヤ袱涓猟iv锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛撅細2銆侀鍏堟槸鐢╤tml鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓娇鐢╯rc灞炴у氨鍙互鎻掑叆鍥剧墖璺緞灏辨垚鍔熶簡锛3銆佹帴鐫鏄敤css鎻掑叆锛屽湪div涓缃甤lass灞炴т负img2锛屽湪script鏍囩涓娇鐢╞ackground鏍囩鎻掑叆锛屽叾涓璾rl鏄爣绛鐨璺緞锛宯o-repeat鏄缃浘鐗...
绛旓細灞曞紑鍏ㄩ儴 杩欎釜灏辨槸榧犳爣鎮仠鐨瑙﹀彂浜嬩欢,浠ｇ爜鑷繁瀛︿簡鏁蹭竴涓嬪氨琛屼簡,娌℃湁閭ｄ箞闅剧殑,鎶婃濊矾鐞嗘竻灏辫浜,瑙﹀彂浜嬩欢閲岄潰鍔犲叆display:none; 鏈洖绛旂敱鎻愰棶鑰呮帹鑽 宸茶禐杩 宸茶俯杩< 浣犲杩欎釜鍥炵瓟鐨勮瘎浠锋槸? 璇勮 鏀惰捣 涓轰綘鎺ㄨ崘:鐗瑰埆鎺ㄨ崘 鎴戝浗鐥旂柈鍙戠梾浜虹兢杈5浜,鍘熷洜鏄粈涔? 鍝簺闈犺氨娓犻亾鍙互鍔2022搴斿眾鐢熸壘宸ヤ綔? 璋风埍鍑屽皢...
