html如何实现鼠标悬停显示文字，鼠标移走文字消失。
通过css伪类中的“hover”来实现。
1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：
2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p {display: none; }”；再给div设置宽和高，这里为了演示方便，为div设置一个灰色的背景色，代码为“div {width: 100px; height: 100px; background: #ccc; }”：
3、给div标签添加hover伪类，然后打出一个空格，再设置此时p标签的显示样式。代码为“div:hover p {display: block; }”，这段代码的意思是，当鼠标放在div上时，将p标签的显示状态从隐藏改成显示，此时p标签中的文字就会显示出来：
4、当鼠标从div移走时，文字就会消失：
绛旓細1銆侀鍏堟墦寮HTML鏂囦欢锛屽苟鍦≒鏍囩閲屾坊鍔犳枃瀛椼2銆佸叾娆″P鏍囩娣诲姞CSS鏍峰紡锛屽苟娣诲姞HOVER灞炴у悗骞朵繚鎸併3銆佺劧鍚庡湪娴忚鍣ㄤ腑鎵ц璇TML鏂囦欢锛榧犳爣鎮仠鍦ㄦ枃瀛椾笂鍗冲彲鍙樻垚绾㈣壊銆傞紶鏍囨偓鍋滅殑鎰忔濇槸鎸囧綋榧犳爣鍦ㄧ綉椤电殑閮ㄥ垎鍥炬爣銆佹枃瀛楁垨鑰呭浘鐗囦笂鍋滅暀鐨勬椂鍊欙紝浼氭湁閮ㄥ垎鍐呭寮瑰嚭銆
绛旓細瀹炵幇榧犳爣鎮仠鏄剧ず鏂囧瓧锛html涓浣跨敤title灞炴у氨鍙瀹炵幇鏄剧ず鏂囧瓧鐨勬晥鏋滐紝杩欎釜灞炴ц繕鏄瘮杈冨疄鐢ㄧ殑锛屼綘鍙互鍙傝冧笅 <a href="#" title="杩欓噷鏄樉绀虹殑鏂囧瓧">hello</a> 褰撻紶鏍囨偓鍋滃湪 hello涓婁竴浼氬氨浼氭湁鏂囧瓧 "杩欓噷鏄樉绀虹殑鏂囧瓧" 鏄剧ず銆
绛旓細1銆侀渶瑕佺粨鍚圝avaScript瀹炵幇锛岄鍏堟墦寮sublime text缂栬緫鍣紝鏂板缓涓涓html鏂囦欢锛屽啓鍏ヤ竴涓爣绛惧拰寮瑰嚭灞俤iv锛屽垎鍒缃畠浠殑榧犳爣绉诲叆鍜岀Щ鍑轰簨浠讹紱鏈鍚庣畝鍗曠殑璁剧疆涓や釜html鏍囩鐨勬牱寮忥紝璁╁脊鍑哄眰榛樿闅愯棌锛岃缃脊鍑哄眰鐨勫ぇ灏忚儗鏅瓑灞炴э細2銆佹帴鐫鍦ㄤ笅鏂圭殑script鏍囩璁剧疆涓や釜鍑芥暟锛屼竴涓槸榧犳爣绉诲叆鏃惰Е鍙戠敤鏉鏄剧ずdiv锛屽彟...
绛旓細鏍规嵁鐧惧害缁忛獙璧勬枡鏄剧ず锛html榧犳爣鎮仠鏂囧瓧鍙樿壊锛屾搷浣滃涓嬶細1.鍦╤tml浠ｇ爜閲岋紝涓哄鍣ㄦ坊鍔燾olor鏍峰紡鍚嶃2.瀹氫箟color鐨勬牱寮忚鍒欙紝涓篴鏍囩娣诲姞hover鐨勬偓鍋滄牱寮忥紝瀛椾綋棰滆壊璁剧疆涓虹孩鑹层3.杩愯椤甸潰锛岄紶鏍囨偓鍋滃悗閾炬帴棰滆壊鍙樹负绾㈣壊銆HTML鐨鍏ㄧО涓鸿秴鏂囨湰鏍囪璇█锛屾槸涓绉嶆爣璁拌瑷銆傚畠鍖呮嫭涓绯诲垪鏍囩锛岄氳繃杩欎簺鏍囩鍙互灏嗙綉缁...
绛旓細<img src="璺緞" title="DREAM" alt=""/> title鍔犱笢瑗垮氨琛屼簡
绛旓細浠ｇ爜濡備笅:<a href= title="杩欓噷鏄鏄剧ず鐨勬枃瀛">hello</a> 褰榧犳爣鎮仠鍦 hello涓婁竴鍥炲氨浼氭湁鏂囧瓧 杩欓噷鏄樉绀虹殑鏂囧瓧 鏄剧ず銆
绛旓細css閲岄潰锛屽彲浠ユ妸鏂囧瓧鏄剧ず灞炴ц缃负block锛岀劧鍚庡湪榧犳爣hover鏃舵妸visiability灞炴ц缃负鍙锛岄紶鏍噊ut鏃惰缃畍isiability璁剧疆涓轰笉鍙灏卞彲浠ヤ簡銆
绛旓細棣栧厛锛屼綘鎶婇紶鏍囪鎮仠鐨勫厓绱犺缃竴涓嬬浉瀵瑰畾浣峱osition:relative.鐒跺悗锛屼綘鍐欎竴涓猟iv锛屾妸浣犳兂鍐欑殑鍐呭鍐欏ソ锛宑ss鑷繁璁剧疆鐨勫悓鏃剁粰瀹冧竴涓粷瀵瑰畾浣峵op鍜宭eft鑷繁璋冩暣锛屾帴鐫锛屽湪css涓坊鍔犱竴鍙ラ殣钘廳isplay:none;鏈鍚庯紝鍦ㄤ綘瑕榧犳爣鎮仠鐨勫厓绱犻偅閲岃缃:hover (+閫夋嫨浣犲垰鍒氬啓鍐呭鐨刣iv)锝沝isplay:block;锝濅笉鐭ラ亾浣犳噦...
绛旓細鐢╰itle灞炴у嵆鍙 <img src="xxx.png" alt="xxx" title="榧犳爣鎮仠鎻愮ず">
绛旓細1銆侀噸鏂板惎鍔ㄦ満鍣ㄣ 2銆佸鏋滈棶棰樹緷鏃э細 濡傛灉浣犵獥鍙ｄ篃鏄ぇ瀛椾綋鐨勮瘽灏遍偅涓嬮潰鐨勬柟娉曞惂! 鍦ㄦ闈㈢┖鐧藉,鐐瑰嚮鍙抽敭閫夋嫨灞炴,鐐瑰嚮澶栬鏍囩,鎶婂瓧浣撹鎴愭甯. 瑕佹槸杩樹笉琛 寮濮---鎵浠ョ▼搴---闄勪欢---绯荤粺宸ュ叿---绯荤粺杩樺師---杩樺師鍒拌緝鏃╃殑鏃堕棿鐐 ...
