html鼠标悬停在文字显示图片 html 鼠标停留在移动的图片上后怎么显示文字，求代码；
html\u5982\u4f55\u5b9e\u73b0\u9f20\u6807\u60ac\u505c\u663e\u793a\u6587\u5b57\uff0c\u9f20\u6807\u79fb\u8d70\u6587\u5b57\u6d88\u5931\u3002\u6700\u7b80\u5355\u7684\u505a\u6cd5\uff0c\u7ed9\u6807\u7b7e\u589e\u52a0title\u5c5e\u6027\uff0c\u5e76\u8d4b\u4e0a\u8981\u663e\u793a\u7684\u5185\u5bb9\uff0c\u4e5f\u5c31\u662f\u6dfb\u52a0title\u5c5e\u6027\u5373\u53ef\u3002
\u4ee3\u7801\uff1a
\u90e8\u5206\u5185\u5bb9
\u6ce8\uff1atitle \u5c5e\u6027\u5e38\u4e0e form \u4ee5\u53ca a \u5143\u7d20\u4e00\u540c\u4f7f\u7528\uff0c\u4ee5\u63d0\u4f9b\u5173\u4e8e\u8f93\u5165\u683c\u5f0f\u548c\u94fe\u63a5\u76ee\u6807\u7684\u4fe1\u606f\u3002\u540c\u65f6\u5b83\u4e5f\u662f abbr \u548c acronym \u5143\u7d20\u7684\u5fc5\u9700\u5c5e\u6027\u3002
\u6269\u5c55\u8d44\u6599\uff1aHTML\u7684title\u5c5e\u6027\u7684\u7528\u6cd5
1\u3001HTML\u7684title\u5c5e\u6027,\u5f53\u5149\u6807\u79fb\u52a8\u5230\u8be5\u6807\u7b7e\u65f6\uff0c\u4fe1\u606f\u63d0\u793a\u6846\u5185\u7684\u5185\u5bb9
\u5c5e\u6027\u9009\u62e9\u5668
2\u3001\u8bbe\u7f6e\u6807\u7b7e\u6837\u5f0f\u65f6\u6307\u5b9a\u3000\u5c5e\u6027css\u6837\u5f0f
css:\u662f\u5c42\u53e0\u6837\u5f0f\u8868
/*\u6709tittle\u5c5e\u6027*/
[title] {
color: darkmagenta;
}
/*\u6307\u5b9atittle\u5c5e\u6027\u503c*/
[title=t] {
color: red;
}
\u5c5e\u6027\u9009\u62e9\u5668
\u5c5e\u6027\u9009\u62e9\u5668\u6307\u5b9a\u5c5e\u6027\u503c
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1aHTML-\u767e\u5ea6\u767e\u79d1
\u7ed9img \u52a0\u4e0atitle\u5c5e\u6027 title="\u8981\u663e\u793a\u7684\u6587\u5b57"
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、然后就完成了。
html:
<div class="abc">
<p>移动上来看美女</p>
<img src="xx.jpg" />
</div>
CSS:
.abc{width:300px; height:200px; position:relative}
.abc>img{ float:left; width:300px; height:200px; position:absolute; display:none}
.abc>p{display:block; width:300px; text-align:center; height:25px; line-height:25px; bottom:0; z-index:999}
//移动上去显示图片
.abc>p:hover.abc>img{display:block}
//如果hover再这里不生效：
//就用JS
$(function(){
$(".abc>p").hover(function(){
$(".abc>img").css("display","block")
})；
$(".abc>p").mouseout(function(){
$(".abc>img").css("display","none")
})
})//这个JS只是移动上去显示，移开好像不隐藏，那么可以用mouseout（移开）属性，
测试下如果有问题再问我，我这里手写的，没有经过测试
把文字放在SPAN里面，把图片放在 div 里面，设置DIV 的CSS display：none
然后用JS 给 span 绑定 mouseover 事件处理代码，代码中 设置DIV CSS display·：block 就可以了
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<div>
<p onmouseover="over()" onmouseout = "out()">指向这里可以显示图片</p>
<img src="https://gss0.bdstatic.com/70cFsj3f_gcX8t7mm9GUKT-xh_/avatar/66/r6s1g8.gif" style="display:none" id="img"/>
</div>
</body>
<script>
function over(){
img = document.getElementById("img");
img.style.display = "block";
}
function out(){
img = document.getElementById("img");
img.style.display = "none";
}
</script>
</html>
<script>
function over(obj_name){
document.getElementById(obj_name).style.visibility="visible";
};
function leave(obj_name){
document.getElementById(obj_name).style.visibility="hidden";
}
</script>
<p onmouseover="over('img_');" onmouseleave="leave('img_');">words</p>
<img src="url..." style="visibility:hidden;" id="img_">
绛旓細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銆...
绛旓細1銆佹柟娉曚竴锛屽埄鐢html鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ height:100px;width:100px;background-color: aqua;} <div title="鎴戞槸榧犳爣鎮仠灞曠ず鐨勫唴瀹">鏂囧瓧鍐呭鏂囧瓧鍐呭</div> 2銆佹柟娉曚簩锛屽埄鐢╟ss鐨勪吉...
绛旓細鐢╰itle灞炴у嵆鍙 <img src="xxx.png" alt="xxx" title="榧犳爣鎮仠鎻愮ず">
绛旓細鍔ㄧ敾鐗规晥銆html閲屽浘鐗囦笂榧犳爣鎮仠灏变細鏈夋枃瀛楀睘浜庡姩鐢荤壒鏁銆傞紶鏍囨偓鍋滅殑鎰忔濇槸鎸囧綋榧犳爣鍦ㄧ綉椤电殑閮ㄥ垎鍥炬爣銆佹枃瀛楁垨鑰呭浘鐗囦笂鍋滅暀鐨勬椂鍊欙紝浼氭湁閮ㄥ垎鍐呭寮瑰嚭锛屾。浠庤繖涓浘鏍囥佹枃瀛楁垨鑰呭浘鐗囦笂绉诲紑榧犳爣鍚庯紝寮瑰嚭鐨勫唴瀹硅嚜鍔ㄧ缉鍥炪
绛旓細1銆佹柊寤html鏂囦欢锛屽湪body鏍囩涓坊鍔犱竴涓猟iv鏍囩锛宒iv鏍囩閲岄潰宓屽涓涓猵鏍囩锛岀劧鍚庢坊鍔爌鏍囩鍐呭锛岃繖閲屼互鈥滄紨绀鏂囨湰鈥濅负渚嬶細2銆佸湪head鏍囩涓坊鍔爏tyle鏍囩锛岀劧鍚庡湪style鏍囩涓粰p鏍囩璁剧疆棰勫厛鏄剧ず鏍峰紡锛岄鍏堟槸鍏堜笉鏄剧ず鐨勶紝鎵浠ョ粰p鏍囩璁剧疆鐨勫睘鎬т唬鐮佹槸鈥減 {display: none; }鈥濓紱鍐嶇粰div璁剧疆瀹藉拰楂橈紝杩欓噷...
绛旓細绠鍐欎负锛欯锛夋潵瀹屾垚銆備负鏍囩缁戝畾mouseenter浠ュ強mouseleave浜嬩欢鍗冲彲銆俬over鏄痗ss涓殑閫夋嫨鍣紝鐢ㄤ簬閫夋嫨榧犳爣鎸囬拡娴姩鍦ㄤ笂闈㈢殑鍏冪礌銆傛墍浠:hover鍙敤浜庤缃綋榧犳爣鎮仠鍦瓒呴摼鎺ヤ箣涓婃椂瓒呴摼鎺ョ殑鏍峰紡銆html鎬庝箞鎶婃爣棰樻斁鍦ㄥ彸涓嬶紵閫氳繃鏍囩鐨則itle灞炴э紝璁剧疆濂借灞曠ず鐨鏂囨湰锛岄紶鏍囨偓娴湪鏍囩涓婂氨鑳界湅鍒版爣棰鏄剧ず鍦ㄥ彸涓嬩簡 ...
绛旓細棰樹富鏄惁鎯宠闂html榧犳爣鎮仠鏂囧瓧鍙樿壊鎬庝箞璁剧疆鈥濓紵1銆侀鍏堬紝鎵撳紑涓涓狧TML鏂囦欢锛屾坊鍔犲ソ鍩烘湰鏍囩骞跺湪body鏍囩閲屾坊鍔爌鏍囩銆2銆佸叾娆★紝瀵筽鏍囩娣诲姞css鏍峰紡锛屽苟娣诲姞hover灞炴с3銆佹渶鍚庯紝缂栬緫濂藉悗淇濆瓨鍦ㄦ祻瑙堝櫒涓墽琛岃HTML鏂囦欢锛榧犳爣鎮仠鍦ㄦ枃瀛涓婂嵆鍙湅鍒版晥鏋滀簡銆
绛旓細src浠ｈ〃鈥滄潵婧愨濆畠鍛婅瘔娴忚鍣ㄥ幓鍝噷鎵惧浘鍍忥紝鍦ㄥ啓浠ｇ爜鐨勬椂鍊欐渶濂藉皢鍥剧墖鏀剧疆鍦ㄤ竴涓枃浠跺す涓嬩繚瀛橈紝閫氳繃杩欐牱鐨勬柟寮忓彲浠ラ氳繃鍚嶇О鍓嶉潰鐨勫瓙鐩綍鍚嶇О鏉ヨ皟鐢ㄥ浘鐗嘺lt浠ｈ〃鈥鏂囧瓧鈥濆憡璇夋祻瑙堝櫒濡傛灉鎵句笉鍒板浘鍍忥紝灏卞彧鏄剧ず璇鏂囨湰锛屾垨鑰呭皢榧犳爣鎮仠鍦ㄥ浘鍍涓婂氨浼氬脊鍑鸿缃殑鏂囧瓧Web鐨勫浘鍍忔牸寮.gif锛氭槸涓绉嶇畝鍗曠殑鏍煎紡锛岀敱涓绯诲垪...
绛旓細</head> <body> <div title="鎴戞槸榧犳爣鎮仠鏂囧瓧">鎴戞槸涓涓狣IV</div> </body> </html> 鎮仠鏂囧瓧鐨勯棶棰 锛 涓嶇敤鍔燙SS 缁欏畠鍔犱釜title灞炴у氨鍙互浜 锛 娴忚鍣ㄤ細榛樿鏈夎繖涓牱寮忕殑锛屾渶缁堟樉绀虹殑鍥剧墖鏄 css閲岄潰锛屽彲浠ユ妸鏂囧瓧鏄剧ず灞炴ц缃负block锛岀劧鍚庡湪榧犳爣hover鏃舵妸visiability灞炴ц缃负鍙锛岄紶鏍噊ut...
绛旓細title銆傛牴鎹煡璇㈤珮鑰100瀹樼綉鏄剧ず锛岀敤浜庤缃榧犳爣鎮仠鏃鍥惧儚鎻愮ず鏂囧瓧鐨勬槸title锛屽綋榧犳爣鍋滄鏃html鏍囩鎮诞鎻愮ず鏂囧瓧锛屼細鍑虹幇鎻愮ず鏂囧瓧鐨勮缃
