html鼠标悬停在文字显示图片
1、首先输入代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标悬停文字上显示图片</title>
2、然后输入代码：
<script language="javascript">
function showPic(e,sUrl){
var x,y;
x = e.clientX;
y = e.clientY;
document.getElementById("Layer1").style.left = x+2+'px';
document.getElementById("Layer1").style.top = y+2+'px';
document.getElementById("Layer1").innerHTML = "
<img border='0' src=\"" + sUrl + "\">";
document.getElementById("Layer1").style.display = "";
}
3、然后输入代码：
function hiddenPic(){
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
4、然后输入代码：
</script>
</head>
<body>
<div id="Layer1" style="display: none; position: absolute; z-index: 100;">
</div>
<img src="http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg" onmouseout="hiddenPic();"
onmousemove="showPic(this.src);" />
5、然后输入代码：
<p>
<a href="" onmouseout="hiddenPic();" onmousemove="showPic(event,'http://avatar.profile.csdn.net/D/8/D/2_dean8828.jpg');">
当鼠标指到标题时,鼠标显示对应图片</a>
</p>
</body>
</html>。
6、然后就完成了。
绛旓細1銆侀鍏堣緭鍏ヤ唬鐮侊細<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>榧犳爣鎮仠鏂囧瓧涓鏄剧ず鍥剧墖</title> 2銆...
绛旓細鐢╰itle灞炴у嵆鍙 <img src="xxx.png" alt="xxx" title="榧犳爣鎮仠鎻愮ず">
绛旓細1銆佹柟娉曚竴锛屽埄鐢html鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ height:100px;width:100px;background-color: aqua;} <div title="鎴戞槸榧犳爣鎮仠灞曠ず鐨勫唴瀹">鏂囧瓧鍐呭鏂囧瓧鍐呭</div> 2銆佹柟娉曚簩锛屽埄鐢╟ss鐨勪吉...
绛旓細1銆佹柊寤轰竴涓枃浠跺す锛岀劧鍚庢柊寤轰竴涓悕绉颁负image鐨勬枃浠跺す锛屽湪image鏂囦欢澶归噷鏀句竴涓悕绉颁负msoffice.jpg鐨勬枃浠讹紙鍙鏄痡pg鏂囦欢灏辫锛夛紱2銆佹墦寮璁颁簨鏈紝鎷疯礉涓嬮潰浠ｇ爜锛<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>榧犳爣鎮仠鏂囧瓧涓鏄剧ず鍥剧墖</TITLE> <script ...
绛旓細绠鍐欎负锛欯锛夋潵瀹屾垚銆備负鏍囩缁戝畾mouseenter浠ュ強mouseleave浜嬩欢鍗冲彲銆俬over鏄痗ss涓殑閫夋嫨鍣紝鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傛墍浠:hover鍙敤浜庤缃綋榧犳爣鎮仠鍦瓒呴摼鎺ヤ箣涓婃椂瓒呴摼鎺ョ殑鏍峰紡銆html鎬庝箞鎶婃爣棰樻斁鍦ㄥ彸涓嬶紵閫氳繃鏍囩鐨則itle灞炴э紝璁剧疆濂借灞曠ず鐨鏂囨湰锛岄紶鏍囨偓娴湪鏍囩涓婂氨鑳界湅鍒版爣棰鏄剧ず鍦ㄥ彸涓嬩簡 ...
绛旓細</head> <body> <div title="鎴戞槸榧犳爣鎮仠鏂囧瓧">鎴戞槸涓涓狣IV</div> </body> </html> 鎮仠鏂囧瓧鐨勯棶棰 锛 涓嶇敤鍔燙SS 缁欏畠鍔犱釜title灞炴у氨鍙互浜 锛 娴忚鍣ㄤ細榛樿鏈夎繖涓牱寮忕殑锛屾渶缁堟樉绀虹殑鍥剧墖鏄 css閲岄潰锛屽彲浠ユ妸鏂囧瓧鏄剧ず灞炴ц缃负block锛岀劧鍚庡湪榧犳爣hover鏃舵妸visiability灞炴ц缃负鍙锛岄紶鏍噊ut...
绛旓細榧犳爣鎮仠鐨勬剰鎬濇槸鎸囷紝褰撻紶鏍囧湪缃戦〉鐨勯儴鍒嗗浘鏍囥鏂囧瓧鎴栬鍥剧墖涓婂仠鐣欑殑鏃跺欙紝浼氭湁閮ㄥ垎鍐呭寮瑰嚭鐭ワ紝妗ｄ粠杩欎釜鍥炬爣銆佹枃瀛楁垨鑰呭浘鐗囦笂绉诲紑榧犳爣鍚庯紝寮瑰嚭鐨勫唴瀹硅嚜鍔ㄧ缉鍥炪傚埄鐢html鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ ...
绛旓細瑕佸疄鐜HTML涓紶鏍囨偓鍋滄樉绀烘枃瀛銆侀紶鏍囩Щ璧版枃瀛楁秷澶辩殑鏁堟灉锛屽彲浠ユ寜鐓т互涓嬫楠ゆ搷浣滐細棣栧厛锛屽湪HTML缁撴瀯涓紝鍒涘缓涓涓熀鏈殑鏂囨。銆傚湪鏍囩涓紝娣诲姞涓涓厓绱狅紝閲岄潰宓屽涓涓厓绱狅紝鐢ㄦ潵鏀剧疆浣犳兂瑕佹樉绀哄拰闅愯棌鐨勬枃瀛楋紝濡傗滄紨绀鏂囨湰鈥濄傛帴涓嬫潵锛屼负鏍峰紡璁剧疆鍋氬噯澶囥傚湪鏍囩鍐咃紝鎻掑叆 ...
绛旓細杩欎釜瀹炵幇璧锋潵寰堝鏄擄紝瀛﹁繃JavaScript銆丆SS鍜HTML鐨濡傛灉娌″繕浜嗗熀鏈兘浼氥<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS鏁欑▼:榧犳爣鎮仠鏂囧瓧涓鏄剧ず鍥剧墖</title> <script language="javascript"> function showPic(sUrl){ var x,y; x = event....
绛旓細<style>.demo{ width:1000px; height:100px; position:relative;}.demo div{ position:absolute;}.demo .imgA{ z-index:11}.demo .imgB{ z-index:10}.demo .imgA:hover+.imgB{z-index:12}.demo .imgB:hover{z-index:12}.imgB:hover{-webkit-transition: 0.6s; -moz-transition:0.6s...
