用HTML怎么设置：当鼠标放在字上面的时候，字体就变色 Html代码问题：用鼠标悬停在文字上文字的颜色就变颜色的效果...
\u5982\u4f55\u7528html\u4f7f\u5f53\u9f20\u6807\u79fb\u5230\u67d0\u65ad\u5b57\u4e0a\u65f6\u6539\u53d8\u5b57\u7684\u5927\u5c0f\u548c\u989c\u8272\u9996\u5148\u9700\u8981\u627e\u5230\u8fd9\u6bb5\u5b57\u6240\u5728\u7684\u6807\u7b7e\uff0c(\u5982\u6807\u7b7e)
\u4e4b\u540e\u8bbe\u7f6e\u5f53\u9f20\u6807\u60ac\u6d6e\u5728\u8be5\u6807\u7b7e\u4e0a\u65f6\u7684\u6837\u5f0f,\u5728css\u6837\u5f0f\u8868\u4e2d\u58f0\u660e\u9009\u62e9\u5668 \u6807\u7b7e:hover(\u5982p:hover)
x:hover\u4e3a\u4f2a\u7c7b\u6837\u5f0f\uff0chover\u8868\u793a\u9f20\u6807\u60ac\u6d6e\u5728\u8fd9\u4e00\u6807\u7b7e\u4e0a\u65f6
\u6700\u540e\u5728{}\u4e2d\u6dfb\u52a0\u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f\u3001\u989c\u8272\u7684\u4ee3\u7801(\u5982 color:red;)
------------------
\u793a\u4f8b\uff1a
p{
/*\u539f\u672cp\u6807\u7b7e\u5185\u5b57\u7b26\u5927\u5c0f14\uff0c\u989c\u8272\u9ed1\u8272*/
color:black;
font-size:14px;
}
p:hover{
/*\u9f20\u6807\u60ac\u6d6e\u5728p\u6807\u7b7e\u4e0a\u65f6\uff0c\u5927\u5c0f20\uff0c\u989c\u8272\u7ea2\u8272*/
color:red;
font-size:20px;
}
.......
\u653e\u5728\u6211\u4e0a\u9762\uff0c\u6211\u4f1a\u53d8\u8272\u54e6
----------------------------------------
\u5982\u679c\u518d\u6709\u7591\u95ee\u8bf7\u8ffd\u95ee
\u8fd9\u79cd\u4e00\u822c\u662f\u501f\u52a9hover\u4e8b\u4ef6\uff0c\u5c31\u662f\u8bf4\u5f53\u9f20\u6807\u653e\u5230\u6587\u5b57\u4e0a\u65f6\u4f1a\u89e6\u53d1\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u6b64\u65f6\u53ef\u4ee5\u4fee\u6539\u6587\u5b57\u7684\u6837\u5f0f\u3002\u53e6\u5916\u4e00\u79cd\u7b80\u5355\u7684\u529e\u6cd5\u5c31\u662f\u76f4\u63a5\u7528css\u7684hover\u5c5e\u6027\u8bbe\u7f6e\u6837\u5f0f\u3002
a.tt:hover {color: #FF0000;}
test
可以将所要变色的文字放进一个标签里，比如<p>标签，让后对这个标签添加一个hover属性，即当鼠标停留在这个标签上时会触发设定好的效果。以下演示具体步骤。
1、打开一个HTML文件，添加好基本标签并在body标签里添加p标签，并在p标签里添加所要变色的文字。
2、接下来对p标签添加css样式，并添加hover属性。当鼠标悬停在p标签上时间文字变为红色，大小变为60px。
3、编辑好后保存在浏览器中执行该HTML文件，鼠标悬停在文字上即可看到效果了。
link 链接
visited 已访问的
hover 鼠标悬停的
active 活动的
<html>
<head>
<title></title>
<style>
/*你要的代码*/
a {color:black;}
a:hover {color:red;}
/*你要的代码*/
</style>
</head>
<body>
<a href="#" target="_self">Baidu</a>
</body>
</html>
link
链接
visited
已访问的
hover
鼠标悬停的
active
活动的
<html>
<head>
<title></title>
<style>
/*你要的代码*/
a
{color:black;}
a:hover
{color:red;}
/*你要的代码*/
</style>
</head>
<body>
<a
href="#"
target="_self">Baidu</a>
</body>
</html>
a:hover{
background-color: blue;
也可以使用鼠标事件绑定：
<a onmouseover="this.style.color='red'" onmouseout="this.style.color='black'" href="#" >linked</a>
绛旓細5銆佷繚瀛html浠ｇ爜鍚浣跨敤娴忚鍣ㄦ墦寮锛褰撻紶鏍婊戣繃<a>涓婄殑鏂囧瓧鍚庡嵆鍙湅鍒伴紶鏍囧彉涓轰簡鎸囬拡鐘舵併傚彲浠ョ洿鎺ュ鍒朵互涓嬩唬鐮佸埌鏂板缓鐨刪tml鏂囦欢涓婏紝绮樿创淇濆瓨鍚庝娇鐢ㄦ祻瑙堝櫒鎵撳紑鍗冲彲鐪嬪埌鏁堟灉銆傛墍鏈変唬鐮侊細<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css璁剧疆榧犳爣鎸囬拡</title> <style type="text/...
绛旓細1銆佹柟娉曚竴锛鍒╃敤html鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с褰撻紶鏍hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ height:100px;width:100px;background-color: aqua;} <div title="鎴戞槸榧犳爣鎮仠灞曠ず鐨勫唴瀹">鏂囧瓧鍐呭鏂囧瓧鍐呭</div> 2銆佹柟娉曚簩锛屽埄鐢╟ss鐨...
绛旓細杩欐牱锛<Ahref=""><imgsrc="../images/yumen.jpg"onmouseover="this.src='../images/yumen1.jpg'"onmouseout="this.src='../images/yumen.jpg'"width="100"height="28"></A>...//璁剧疆涓涓猟iv锛屼絾鏄粯璁ゅ嵈鏄殣钘忚捣鏉ョ殑銆.s1{ position: absolute;display: none;} // js function show...
绛旓細鐢╟ss銆俬ttp://www.w3school.com.cn/cssref/selector_hover.asp
绛旓細html濡備綍鍦榧犳爣缁忚繃鍙︿竴寮犲浘鐗囨椂鏄剧ず瀹冿紵1銆佸噯澶囧垏鎹㈠浘鐗囩礌鏉愶紝涓鑸槸涓ゅ紶锛屽鍥撅紝鏀惧叆img鏂囦欢澶癸紝璺烪TML鍚岀骇銆1銆傚噯澶囧垏鎹㈠浘鐗囩礌鏉愶紝涓鑸槸涓や釜锛屽鍥撅紝鏀惧湪img鏂囦欢澶归噷锛屽拰HTML涓涓骇鍒2銆佺劧鍚庣敤img宓屽叆鍒扮綉椤碉紝宓屽叆鍏朵腑鐨勪竴寮狅紝鍙﹀涓寮犲緟浼氬垏鎹2.鐒跺悗鐢╥mg宓屽叆鍒扮綉椤典腑锛屽祵鍏ュ叾涓竴涓紝浠ュ悗鍐...
绛旓細鍦ㄦ牱寮忎笂鍐 li:hover{border:1px solid #ddd} 涓嶈繃杩欐牱鐨勪吉绫伙紝ie6銆7涓嶆敮鎸併傝嫢瑕佸吋瀹规э紝鍙湁閫氳繃js鍘诲啓銆備緥濡傦細鍏堝畾涔変竴涓牱寮忓悕鏄甫杈规鐨 .hover{border:1px solid #ddd} <LI onmouseover="this.className='hover'" onmouseout="this.className=''" >褰撻紶鏍囨斁鍦</li> 浣嗘槸杩欐牱闈炲父楹荤儲锛...
绛旓細var MyMar1=setInterval(Marquee1,speed)//璁剧疆瀹氭椂鍣 //榧犳爣绉讳笂鏃舵竻闄ゅ畾鏃跺櫒杈惧埌婊氬姩鍋滄鐨勭洰鐨 butong_net_top.onmouseover=function() {clearInterval(MyMar1)} //榧犳爣绉诲紑鏃堕噸璁惧畾鏃跺櫒 butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script> <!--鍚戜笂婊氬姩...
绛旓細杩欐槸涓嬫媺鑿滃崟鐗规晥锛岃鐢╦q锛岀綉涓婃湁涓嬫媺鐨勭壒鏁堬紝鎵句竴涓敼涓涓 澶ф鐨勬濊矾灏辨槸锛屾妸涓嬭竟涓鏁寸墖鏀惧湪涓涓眰閲岋紝杩欎釜灞備綔涓衡滀釜浜哄強銆傘傜敤鎴封濈殑瀛愮骇锛屸滀釜浜哄強銆傘傜敤鎴封濊涓簆osition:relative锛屼笅杈逛竴澶у眰璁句负锛歱osition:absolute锛屽畾涓涓嬩綅缃紝璁剧疆涓篸isplay锛歯one銆傜劧鍚庡啀js閲岃繖鏍峰啓锛(document).ready(...
绛旓細鍙互鐢╦s浜嬩欢鈥渙nmouseover鈥濆拰鈥渙nmouseout鈥濇潵瀹炵幇銆1銆佹柊寤html鏂囨。锛屽湪body鏍囩涓坊鍔犲浘鐗囨爣绛撅紝涓鸿繖涓爣绛璁剧疆鈥渋d鈥濆睘鎬э紝鐒跺悗璁剧疆鍥剧墖鐨勯粯璁ゆ樉绀哄ぇ灏廲ss灞炴э細2銆佹坊鍔犫渙nmouseover鈥漥s浜嬩欢锛岄鍏浣跨敤鈥渄ocument.getElementById鈥濊幏鍙栧埌鍥剧墖鏍囩锛岀劧鍚庡畾涔榧犳爣绉诲姩鍒板浘鐗囦笂鏃跺彂鐢熺殑浜嬩欢锛岃繖鏃跺浘鐗囧皢浼氭斁澶э細...
绛旓細杩欐牱閰嶇疆锛岃緭鍏oid锛岀劧鍚庢寜tab閿紝html鏂囦欢灏变細杈撳嚭 <a href="javascript:void(0);">鍏夋爣浣嶇疆</a> 骞朵笖鍏夋爣浼氳嚜鍔ㄧЩ鍔ㄥ埌 $0鐨勪綅缃嚜瀹氫箟鐨勪唬鐮佺墖娈典腑锛浣跨敤$+鏁板瓧鎴栧瓧姣嶈〃绀哄彉閲忥紝鍙橀噺涓嶄細杈撳嚭锛屽彧鐢ㄦ潵璁板綍鍏夋爣浣嶇疆銆備娇鐢 $0 浠ｈ〃鍏夋爣榛樿浣嶇疆锛$1浠ｈ〃鎸変笅tab閿悗鍏夋爣绉诲姩鍒颁笅涓涓綅缃備篃鍙互浣跨敤...
