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
\u767e\u5ea6\u7f51\u5740
\u5982\u4e0a\u793a\u4f8b\uff1a
\u5728href \u91cc\u9762\u5199\u4e0a\u4f60\u8981\u94fe\u63a5\u7684\u7f51\u7ad9\uff0c\u5728\u6807\u7b7e\u4e4b\u95f4\u5199\u4e0a\u9700\u8981\u505c\u7559\u7684\u6587\u5b57,title\u662f\u6807\u9898\uff0c\u5c31\u662f\u9f20\u6807\u60ac\u6d6e\u7684\u65f6\u5019\u51fa\u73b0\u7684\u63d0\u793a\u8bed\u3002
1、需要结合JavaScript实现，首先打开sublime text编辑器，新建一个html文件，写入一个标签和弹出层div，分别设置它们的鼠标移入和移出事件；最后简单的设置两个html标签的样式，让弹出层默认隐藏，设置弹出层的大小背景等属性：
2、接着在下方的script标签设置两个函数，一个是鼠标移入时触发用来显示div，另一个用来设置移出鼠标时让div消失；函数体内直接获取div的dom元素并设置display属性就可以了：
3、最后打开浏览器，可以看到一段文字：
4、当把鼠标移入时，就会显示出隐藏的div文字了：
实现鼠标悬停显示文字，html中使用title属性就可实现显示文字的效果，这个属性还是比较实用的，你可以参考下
<a href="#" title="这里是显示的文字">hello</a>
当鼠标悬停在 hello上一回就会有文字 "这里是显示的文字" 显示。
绛旓細鐩存帴鍦℉TML涓璁剧疆榧犳爣鎮仠鏃跺瓧浣撳彉鑹茬殑姝ラ濡備笅锛氶鍏堬紝浣犻渶瑕佸皢鎯冲彉鑹茬殑鏂囧瓧鍖呭惈鍦℉TML鐨涓涓厓绱犱腑锛屾瘮濡傛爣绛俱傝繖涓姝ュ彲浠ラ氳繃鍦ㄩ儴鍒嗗垱寤轰竴涓爣绛撅紝骞跺湪鍏朵腑杈撳叆浣犵殑鏂囧瓧鏉瀹炵幇銆傜劧鍚庯紝涓鸿繖涓爣绛炬坊鍔燙SS鏍峰紡锛岀壒鍒槸hover浼被銆傚綋榧犳爣鎮仠鍦ㄦ爣绛句笂鏃讹紝杩欎釜浼被浼氳Е鍙戜綘棰勮鐨勬牱寮忔敼鍙樸備緥濡傦紝浣犲彲浠ヨ缃...
绛旓細鍙互閫氳繃HTML涓殑CSS鍜孞avaScript鏉ュ疄鐜拌繖涓晥鏋銆傞氳繃CSS璁剧疆涓涓被锛堜緥濡.hover-text锛夋潵鎺у埗鍙︿竴涓枃瀛楃殑鏄剧ず鍜岄殣钘忋傚垵濮嬬姸鎬佷笅锛岃缃.display灞炴т负none锛屼娇鍏堕殣钘忋備娇鐢↗avaScript鐩戝惉榧犳爣浜嬩欢锛屽綋榧犳爣鎮仠鍦ㄥ甫鏈.hover-text绫荤殑鍏冪礌涓婃椂锛岄氳繃娣诲姞.visible绫绘潵鏄剧ず璇ュ厓绱犮傚綋榧犳爣绉诲嚭鏃讹紝閫氳繃绉婚櫎.visibl...
绛旓細鍙互灏嗘墍瑕佸彉鑹茬殑鏂囧瓧鏀捐繘涓涓爣绛鹃噷锛屾瘮濡<p>鏍囩锛岃鍚庡杩欎釜鏍囩娣诲姞涓涓猦over灞炴э紝鍗冲綋榧犳爣鍋滅暀鍦ㄨ繖涓爣绛句笂鏃朵細瑙﹀彂璁惧畾濂界殑鏁堟灉銆備互涓嬫紨绀哄叿浣撴楠ゃ1銆佹墦寮涓涓狧TML鏂囦欢锛屾坊鍔犲ソ鍩烘湰鏍囩骞跺湪body鏍囩閲屾坊鍔爌鏍囩锛屽苟鍦╬鏍囩閲屾坊鍔犳墍瑕佸彉鑹茬殑鏂囧瓧銆2銆佹帴涓嬫潵瀵筽鏍囩娣诲姞css鏍峰紡锛屽苟娣诲姞hover灞炴...
绛旓細1銆侀渶瑕佺粨鍚圝avaScript瀹炵幇锛岄鍏堟墦寮sublime text缂栬緫鍣紝鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ竴涓爣绛惧拰寮瑰嚭灞俤iv锛屽垎鍒缃畠浠殑榧犳爣绉诲叆鍜岀Щ鍑轰簨浠讹紱鏈鍚庣畝鍗曠殑璁剧疆涓や釜html鏍囩鐨勬牱寮忥紝璁╁脊鍑哄眰榛樿闅愯棌锛岃缃脊鍑哄眰鐨勫ぇ灏忚儗鏅瓑灞炴э細2銆佹帴鐫鍦ㄤ笅鏂圭殑script鏍囩璁剧疆涓や釜鍑芥暟锛屼竴涓槸榧犳爣绉诲叆鏃惰Е鍙戠敤鏉ユ樉绀篸iv锛屽彟...
绛旓細瑕瀹炵幇榧犳爣鎮仠鏃舵樉绀鏂囧瓧锛岄紶鏍囩Щ寮鍒欐秷澶辩殑鏁堟灉锛屽彲浠ヤ娇鐢HTML鍜孋SS鐨勭粨鍚堛備笅闈㈡槸鍏蜂綋姝ラ锛氶鍏堬紝鍒涘缓涓涓柊鐨凥TML鏂囦欢锛岀‘淇濆湪``鏍囩鍐咃紝宓屽涓涓猔`鍏冪礌锛岄噷闈㈠寘鍚竴涓猔`鏍囩锛屼緥濡傦紝鍐欏叆鈥滄紨绀烘枃鏈濄傛帴涓嬫潵锛屽湪``閮ㄥ垎娣诲姞涓涓猔`鏍囩锛屼负鍚庣画鏍峰紡璁剧疆鍋氬噯澶囥傚垵濮嬫椂锛屼綘闇瑕佽``鏍囩闅愯棌锛屾墍浠...
绛旓細background: #ccc; }鈥濓細3銆佺粰div鏍囩娣诲姞hover浼被锛岀劧鍚庢墦鍑轰竴涓┖鏍硷紝鍐嶈缃鏃秔鏍囩鐨勬樉绀烘牱寮忋備唬鐮佷负鈥渄iv:hover p {display: block; }鈥濓紝杩欐浠ｇ爜鐨勬剰鎬濇槸锛屽綋榧犳爣鏀惧湪div涓婃椂锛屽皢p鏍囩鐨勬樉绀虹姸鎬佷粠闅愯棌鏀规垚鏄剧ず锛屾鏃秔鏍囩涓殑鏂囧瓧灏变細鏄剧ず鍑烘潵锛4銆佸綋榧犳爣浠巇iv绉昏蛋鏃讹紝鏂囧瓧灏变細娑堝け锛
绛旓細瀹炵幇榧犳爣鎮仠鏄剧ず鏂囧瓧锛html涓浣跨敤title灞炴у氨鍙疄鐜版樉绀烘枃瀛楃殑鏁堟灉锛岃繖涓睘鎬ц繕鏄瘮杈冨疄鐢ㄧ殑锛屼綘鍙互鍙傝冧笅 <a href="#" title="杩欓噷鏄樉绀虹殑鏂囧瓧">hello</a> 褰撻紶鏍囨偓鍋鍦 hello涓婁竴浼氬氨浼氭湁鏂囧瓧 "杩欓噷鏄樉绀虹殑鏂囧瓧" 鏄剧ず銆
绛旓細1銆佹柟娉曚竴锛屽埄鐢html鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ height:100px;width:100px;background-color:aqua;} <divtitle=\"鎴戞槸榧犳爣鎮仠灞曠ず鐨勫唴瀹筡">鏂囧瓧鍐呭鏂囧瓧鍐呭</div> ...
绛旓細/images/yumen1.jpg'"onmouseout="this.src='../images/yumen.jpg'"width="100"height="28"></A>...//璁剧疆涓涓猟iv锛屼絾鏄粯璁ゅ嵈鏄殣钘忚捣鏉ョ殑銆.s1{ position: absolute;display: none;} // js function show(){ document.getElementById("s1").style.display="block";} function dis ...
绛旓細鍦浣犲ソ瀛椾笂鍔犲叆 鏍囩 alt="浣犲ソ"灞炴 濡傦細姣斿鍔犲叆涓涓浘鐗囷紝鍡湪鍥剧墖鍚庨潰鍔犲叆altalt="浣犲ソ"灞炴,褰榧犳爣绉诲埌涓婇潰鏃跺氨 浼氭樉绀 浣犲ソ 瀛楁牱
