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
1\u3001\u9700\u8981\u7ed3\u5408JavaScript\u5b9e\u73b0\uff0c\u9996\u5148\u6253\u5f00sublime text\u7f16\u8f91\u5668\uff0c\u65b0\u5efa\u4e00\u4e2ahtml\u6587\u4ef6\uff0c\u5199\u5165\u4e00\u4e2a\u6807\u7b7e\u548c\u5f39\u51fa\u5c42div\uff0c\u5206\u522b\u8bbe\u7f6e\u5b83\u4eec\u7684\u9f20\u6807\u79fb\u5165\u548c\u79fb\u51fa\u4e8b\u4ef6\uff1b\u6700\u540e\u7b80\u5355\u7684\u8bbe\u7f6e\u4e24\u4e2ahtml\u6807\u7b7e\u7684\u6837\u5f0f\uff0c\u8ba9\u5f39\u51fa\u5c42\u9ed8\u8ba4\u9690\u85cf\uff0c\u8bbe\u7f6e\u5f39\u51fa\u5c42\u7684\u5927\u5c0f\u80cc\u666f\u7b49\u5c5e\u6027\uff1a
2\u3001\u63a5\u7740\u5728\u4e0b\u65b9\u7684script\u6807\u7b7e\u8bbe\u7f6e\u4e24\u4e2a\u51fd\u6570\uff0c\u4e00\u4e2a\u662f\u9f20\u6807\u79fb\u5165\u65f6\u89e6\u53d1\u7528\u6765\u663e\u793adiv\uff0c\u53e6\u4e00\u4e2a\u7528\u6765\u8bbe\u7f6e\u79fb\u51fa\u9f20\u6807\u65f6\u8ba9div\u6d88\u5931\uff1b\u51fd\u6570\u4f53\u5185\u76f4\u63a5\u83b7\u53d6div\u7684dom\u5143\u7d20\u5e76\u8bbe\u7f6edisplay\u5c5e\u6027\u5c31\u53ef\u4ee5\u4e86\uff1a
3\u3001\u6700\u540e\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u53ef\u4ee5\u770b\u5230\u4e00\u6bb5\u6587\u5b57\uff1a
4\u3001\u5f53\u628a\u9f20\u6807\u79fb\u5165\u65f6\uff0c\u5c31\u4f1a\u663e\u793a\u51fa\u9690\u85cf\u7684div\u6587\u5b57\u4e86\uff1a
<a href="#" title="这里是显示的文字">hello</a>
当鼠标悬停在 hello上一会就会有文字 "这里是显示的文字" 显示。
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 非常不错的一款连接提示信息显示效果 </ title >
</ head >< body >
<!-- 将以下代码加入HTML的<Body></Body>之间 -->
< script language ="javascript" >
function openUser(id) {
var Win = window.open("dispuser.asp?name="+id,"openScript");
}
function openScript(url, width, height){
var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=yes' );
}
function openDis(bid,rid,id){
self.location="dispbbs.asp?boardid="+bid+"&RootID="+rid+"&id="+id
}
function PopWindow()
{
openScript('messanger.asp?action=newmsg',420,320);
}
var nn = !!document.layers;
var ie = !!document.all;
if (nn) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalSystemClipboardAccess");
var fr=new java.awt.Frame();
var Zwischenablage = fr.getToolkit().getSystemClipboard();
}
function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
</ script >
< script Language ="JavaScript" >
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=2000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #FFFFFF;color:#000000; border: 1px #000000 solid;font-color: font-size: 10px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
</ script >
< style type ='text/css'id='defaultPopStyle' >
A:visited{TEXT-DECORATION: none;Color:#000000}
A:active{TEXT-DECORATION: none;Color:#000000}
A:hover{TEXT-DECORATION: underline;Color:#000000}
A:link{text-decoration: none;Color:#000000}
.t{LINE-HEIGHT: 1.4}
BODY{FONT-FAMILY: "宋体"; FONT-SIZE: 12px;
SCROLLBAR-HIGHLIGHT-COLOR: #9BDBDB;
SCROLLBAR-SHADOW-COLOR: #9BDBDB;
SCROLLBAR-3DLIGHT-COLOR: #9BDBDB;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #9BDBDB;
scrollbar-Base-Color: #9BDBDB;
Color:#000000
}
td, p, div, br{FONT-FAMILY: "宋体"; FONT-SIZE: 12px;Color:#000000;}
FORM{FONT-FAMILY: "宋体"; FONT-SIZE: 12px}
OPTION{FONT-FAMILY: "宋体"; FONT-SIZE: 12px}
INPUT{BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 9pt; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc; font-family: "宋体"; font-size: 12px}
textarea {border-width: 1; border-color: #000000; background-color: #efefef; font-family: "宋体"; font-size: 12px; font-style: bold;}
select {border-width: 1; border-color: #000000; background-color: #eeeeee; font-family: "宋体"; font-size: 12px; font-style: bold;}
</ style >
< a href ="#" title ="几千个网页特效<BR>网页美容专家<BR>轻轻松松为你的网页作美容<BR>欢迎您的光临 :)<BR>" > 网页特效 </ a >
</ body ></ html >
绛旓細鏈绠鍗曠殑鍋氭硶锛岀粰鏍囩澧炲姞title灞炴э紝骞惰祴涓婅鏄剧ず鐨勫唴瀹癸紝涔熷氨鏄坊鍔爐itle灞炴у嵆鍙備唬鐮侊細<div title="鍏ㄩ儴鍐呭">閮ㄥ垎鍐呭</div> 娉細title 灞炴у父涓 form 浠ュ強 a 鍏冪礌涓鍚屼娇鐢紝浠ユ彁渚涘叧浜庤緭鍏ユ牸寮忓拰閾炬帴鐩爣鐨勪俊鎭傚悓鏃跺畠涔熸槸 abbr 鍜 acronym 鍏冪礌鐨勫繀闇灞炴с
绛旓細鍔犱釜榧犳爣浜嬩欢onmouseover锛岃Е鍙慾query鏂规硶锛宩query鏂规硶涓敼鍙鏂囧瓧涓烘寜閽
绛旓細璁剧疆鏍囪鐨則itle灞炴у氨琛屼簡.姣斿 <font title="xxx">榧犳爣绉讳笂鏉</font> 灏变細鏄剧ずxxx,绉昏蛋灏辨病浜
绛旓細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...
绛旓細<a href="www.baidu.com" title="璇风偣鍑绘垜">鐧惧害缃戝潃</a> 濡備笂绀轰緥锛鍦href 閲岄潰鍐欎笂浣犺閾炬帴鐨勭綉绔欙紝鍦<a>鏍囩涔嬮棿鍐欎笂闇瑕佸仠鐣欑殑鏂囧瓧,title鏄爣棰橈紝灏辨槸榧犳爣鎮诞鐨勬椂鍊欏嚭鐜扮殑鎻愮ず璇
绛旓細棣栧厛闇瑕佹壘鍒拌繖娈瀛鎵鍦ㄧ殑鏍囩锛(濡<p>鏍囩)涔嬪悗璁剧疆褰榧犳爣鎮诞鍦ㄨ鏍囩涓婃椂鐨勬牱寮,鍦╟ss鏍峰紡琛ㄤ腑澹版槑閫夋嫨鍣 鏍囩:hover(濡俻:hover)x:hover涓轰吉绫绘牱寮忥紝hover琛ㄧず榧犳爣鎮诞鍦ㄨ繖涓鏍囩涓婃椂鏈鍚庡湪{}涓坊鍔犺缃瓧浣撳ぇ灏忋侀鑹茬殑浠ｇ爜(濡 color:red;)瓒呮枃鏈爣璁拌瑷锛堟爣鍑嗛氱敤鏍囪璇█涓嬬殑涓涓簲鐢紝澶栬...
绛旓細"s1").style.display="none";} <img src="small.bmp"onmouseover="show();" onmouseout="dis();"> <div class="s1" id="s1"><img src="big.bmp"></div> 瑕佹槸鎯冲脊鍑鏂囧瓧浠嬬粛 鎶妔1閲岄潰鐨刬mg鎹㈡垚瀛楀氨琛屼簡锛屾垨鑰呯畝鍗曠偣灏卞湪绗竴涓猧mg涓婂姞涓涓猘lt鐨勫睘鎬э紝榧犳爣鏀惧湪涓婅竟涔熸湁鏄剧ず銆
绛旓細鎵鐢ㄥ伐鍏凤細Dreamweaver 榧犳爣鍋滅暀鍦ㄦ枃瀛椾笂鏄剧ず娉ㄩ噴鐢ㄧ殑鏄html鐨title灞炴э紝鍙互鍦ㄦ钀芥枃瀛梡鏍囩涓坊鍔爐itle灞炴у拰灞炴у硷紙Dreamweaver瑕佸垏鎹㈡垚浠ｇ爜锛変緥濡傦細<p title="鏄剧ず鏂囧瓧娉ㄩ噴鍐呭...">鏂囨湰鏂囧瓧</p> 鍏蜂綋鎿嶄綔 鍦―reamweaver杞欢涓垏鎹㈡垚浠ｇ爜鐘舵 鍦ㄦ钀芥枃瀛梡鏍囩涓坊鍔爐itle灞炴у拰灞炴у 淇濆瓨鍦ㄦ祻瑙堝櫒涓...
绛旓細html涓鏈変竴涓爣绛撅紝鐩存帴缁鏂囧瓧娣诲姞涓涓猘鏍囩 锛沑x0d\x0a姣斿锛歕x0d\x0a鍏充簬鎴戜滑\x0d\x0aa鏍囩榛樿鐨榧犳爣鏀涓婂幓灏辨槸涓涓墜鎸囩殑鏍峰紡锛屾垨鑰呬綘涔熷彲浠ョ敤cursor: pointer;杩欎釜缁欎粬璁剧疆涓涓嬶紝cursor杩樻湁鍏朵粬鐨勫睘鎬у彲浠ヤ娇鐢
绛旓細鎿嶄綔姝ラ濡備笅锛1銆侀鍏堟墦寮html寮鍙戝伐鍏凤紝鍒涘缓涓涓猦tml鏂囦欢銆2銆佸湪html椤甸潰鎵惧埌<body>鏍囩锛屽湪<body>鏍囩閲岄潰杈撳叆鍐呭锛岀劧鍚庣敤<a>鏍囩鎶婂唴瀹硅鐩栥3銆佷慨鏀<a>鏍囩鐨勫唴瀹硅缃鑹蹭负钃濊壊銆4銆佷繚瀛樺ソhtml鏂囦欢锛屼娇鐢ㄦ祻瑙堝櫒鎵撳紑锛屾妸榧犳爣鏀惧埌鏂囧瓧涓灏变細鍙戠幇瀛椾綋鍙樹负钃濊壊瀛椾綋銆
