鼠标点击字体换颜色在div+css中怎么实现 鼠标点击字体换颜色在div+css中怎么实现？
\u9f20\u6807\u70b9\u51fb\u540e\u5b57\u4f53\u6539\u53d8\u53e6\u4e00\u79cd\u989c\u8272\u7684CSS\u6837\u5f0f\u600e\u4e48\u5199\uff1f\u7b80\u5355\uff0c\u5982\u679c\u6587\u5b57\u7684\u8bdd\uff0c\u90a3HTML\u5f97\u6587\u5b57\u524d\u9762\u5c31\u662fP\u6807\u7b7e\uff0c\u90a3\u4e48\u5b9a\u4e49CSS\uff0c .p a:{color:\u989c\u8272\uff1b}\u5c31\u53ef\u4ee5\u4e86\u524d\u9762\u90a3\u4e2a\u4e00\u6837\uff0c\u5173\u952e\u662f\u770b\u524d\u9762\u7684\u6807\u7b7e\u662f\u4ec0\u4e48,\u6211\u4eec\u4e00\u8fb9\u7528CSS+DIV\u5b9a\u4e49
\u9996\u5148\u8981\u770bLZ\u4f1a\u4e0d\u4f1a\u5199CSS\u3002\u5982\u679c\u4f1a\u7684\u8bdd\uff0c\u9f20\u6807\u60ac\u505c\u5728CSS\u4e2d\u5199\u4e3aHOVER\uff0c\u9f20\u6807\u89e6\u53d1\u5728CSS\u4e2d\u5199\u4e3aACTIVE\u3002
\u6240\u4ee5\u5982\u4e0b\u6240\u5199\uff1a
a {
color:red;}
a:hover {
color:black;}
a:active {
color:blue;}
\u5728\u8fd9\u5176\u4e2d\uff0ca \u540e\u9762\u7684color:red;=\u94fe\u63a5\u6587\u5b57\u4e3a\u7ea2\u8272\uff0ca:hover \u7684 color:black;=\u9f20\u6807\u79fb\u52a8\u5230\u94fe\u63a5\u6587\u5b57\u4e0a\u540e\u4e3a\u9ed1\u8272\uff0c a:active \u7684 color:blue;= \u9f20\u6807\u70b9\u51fb\u94fe\u63a5\u6587\u5b57\u540e\u4e3a\u84dd\u8272\u3002\u5e0c\u671b\u53ef\u4ee5\u5e2e\u5230\u4f60\u3002
所以如下所写：
a {
color:red;}
a:hover {
color:black;}
a:active {
color:blue;}
在这其中，a 后面的color:red;=链接文字为红色，a:hover 的 color:black;=鼠标移动到链接文字上后为黑色， a:active 的 color:blue;= 鼠标点击链接文字后为蓝色。希望可以帮到你。
首先要看LZ会不会写CSS。如果会的话，鼠标悬停在CSS中写为HOVER，鼠标触发在CSS中写为ACTIVE。
所以如下所写:
a {
color:red；}
a:hover {
color:black；}
a:active {
color:blue；}
在这其中，a 后面的color:red；=链接文字为红色，a:hover 的 color:black；=鼠标移动到链接文字上后为黑色， a:active 的 color:blue；= 鼠标点击链接文字后为蓝色。
<html>
<head>
<style>
#txt{cursor:hand;}
</style>
<script type="text/javascript">
var txtColor_arr=new Array("#f00","#0f0","#00f","#000");
function Change_txtColor(txt){
var str;
txt.style.color=txtColor_arr[0];
str=txtColor_arr.shift();
txtColor_arr.push(str);
}
</script>
</head>
<body>
<div id="txt" onclick=Change_txtColor(this)>test</div>
</body>
</html>
<style>
a{color:#0015ac;}
a:hover{color:#aa4400;}
a:active{color:#0055ff;}
</style>
只要在<head>和</head>之间加上这段代码就好了，你试一下就知道了
a{
text-decoration:none;
color:#000000;
}
a:hover{
text-decoration:none;
color:#FF0000;
}
绛旓細鍏堜笉鍋氫换浣曠殑璁剧疆锛岄瑙堢湅鐪嬫爣绛句腑鐨瀛椾綋鎯呭喌锛屾槸榛戣壊鐨勩傛帴鐫寮濮嬭瀹冨彉鑹层傚鍥撅紝缂栧啓涓涓猻tyle鏍囩锛岄氳繃css鏉ヨ缃榧犳爣缁忚繃鏃舵枃瀛楀彉鑹层傜劧鍚庡啓涓奷iv:hover鍔犺姳鎷彿锛屽鏋滀綘鏄叾浠栨爣绛惧氨鐢ㄥ叾浠栨爣绛惧悕鏇挎崲div鍗冲彲銆傜劧鍚庝娇鐢╟olor锛宑olor鍚庨潰琛ㄧず鐨勬槸榧犳爣缁忚繃鏃跺彉鍖栫殑棰滆壊锛屼篃灏辨槸棰滆壊鍊笺傝繖鏍凤紝璁剧疆濂戒箣鍚...
绛旓細2銆佸湪<body></body>鏍囩鍐咃紝鎻掑叆涓涓div鏍囩锛屽苟璁剧疆瀵瑰簲鐨処D灞炴у拰鍐呭銆3銆佸湪CSS鏍囩鍐呬娇鐢↖D閫夋嫨鍣紝璁剧疆div鏍囩鍐呯殑鍐呭鏂囧瓧澶у皬锛屼娇鐢╲min銆4銆佷繚瀛樹唬鐮佸苟鐩存帴鎵撳紑娴忚鍣ㄩ瑙堟晥鏋滐紝鍙互鍙戠幇浣跨敤vmin璁剧疆鐨勬瘮鍚屽肩殑px鐨勮澶с5銆佸皢css鏍峰紡灞炴т腑鐨剉min鏀涓簐max锛岀劧鍚庝繚瀛樹唬鐮佸苟鏌ョ湅鏁堟灉鍗冲彲銆
绛旓細3銆侀夋嫨鈥滃鍚堝唴瀹光濓紝閫夋嫨a:link锛岃〃绀烘甯搁摼鎺ユ椂鐨勬牱寮忋4銆鐐瑰嚮纭畾锛屾墦寮鏍峰紡璁剧疆闈㈡澘锛岄夋嫨Color:#333锛屾垨鍒殑浣犺鐨勭潃鑹诧紝纭畾銆5銆佷笅闈㈣缃榧犳爣缁忚繃鐨勬枃瀛楄壊褰╋紝杩樻槸鍙傝冪浜屾锛屾墦寮鏂板缓CSS瑙勫垯闈㈡澘锛岄夋嫨鈥滃鍚堝唴瀹光濓紝閫夋嫨鍣ㄤ腑閫夋嫨锛歛:hover锛6銆乧olor涓夋嫨榧犳爣缁忚繃鐨棰滆壊锛岃繖閲屼互鈥#F00鈥...
绛旓細.td_mouseover{ background-color:#FF0000;color:#FFFFFF;} .td_normal{ background-color:#FFFFFF;color:#000000;} </style> <table> <tr> <td onmouseover="this.className='td_mouseover';" onmouseout="this.className='td_normal';"> 榧犳爣缁忚繃杩欓噷鑳屾櫙鍜屾枃瀛椾細鍙樿壊 </td> <tr>...
绛旓細鍙傜収浠ヤ笅浠ｇ爜锛氬啓鍦ㄦ爣绛惧唴鐨榧犳爣缁忚繃鐨勮鍙ャ<p>鏌ユ壘鏇村浠ｇ爜锛.borderColor涔嬬被鐨勫墠闈竴瀹氳鏈塻tyle锛屽洜涓烘槸鏀瑰彉琛屽唴鏍峰紡锛屽鏋滄槸classname灏变笉鐢紝濡俹nMouseOut="this.style.background='url(image/login_2.jpg)'" 锛屼竴瀹氳'url()',涓嶇劧鍑洪敊銆<div class="cbt2" onMouseOver="this.className='cbt...
绛旓細/*缃戠珯閾炬帴鎬荤殑CSS瀹氫箟:鍙畾涔夊唴瀹逛负閾炬帴瀛椾綋棰滆壊銆佹牱寮忕瓑*/ a{text-decoration: underline;} /*閾炬帴鏃犱笅鍒掔嚎none,鏈変负underline*/ a:link {color: #00007f;} /*鏈闂殑閾炬帴 */ a:visited {color: #65038e;} /*宸茶闂殑閾炬帴*/ a:hover{color: #ff0000;} /*榧犳爣鍦閾炬帴涓 */ a:active...
绛旓細<div class="test"> <a href="#">瀛椾綋</a> </div> css .test a{ width:100px; height:30px; background:red; color:#fff; display:block} .test a:hover{ background:#acddde; color:red}
绛旓細1銆佸厛鍦ㄦ壘涓枃浠跺す鍒涘缓鏂囦欢index.html銆2銆佺劧鍚庣敤鑳界紪杈戞枃鏈枃浠剁殑杞欢鎵撳紑index.html锛宨ndex.html鐨勫垵濮嬪唴瀹瑰鍥俱3銆佹帴鐫缂栧啓涓や釜鏍峰紡浣滀负榧犳爣绉诲姩鏃div淇敼鐨勬牱寮忋4銆佺劧鍚庣紪鍐檍s浠ｇ爜淇敼div鐨勬牱寮忋5銆佺紪杈戝畬index.html鍚庝繚瀛橈紝鍦ㄦ祻瑙堝櫒涓墦寮index.html銆傛晥鏋滃鍥俱傞紶鏍囩Щ鍏ョЩ鍑篸iv鏃讹紝div鐨勬牱寮鏀...
绛旓細background-color:div鐨勯鑹插睘鎬э紝text-color銆乫ont-cilor:瀛椾綋棰滆壊锛屼綘鍘粀3school涓婁慨鐐煎嚑涓湀鍐嶆潵鍚э紝缃戠珯鍦板潃鐪嬪鑸
绛旓細濡傛灉鏂囧瓧澶栨湁鏍囩锛屽锛氣<span>鏂囧瓧</span>鈥濓紝鍙互浣跨敤鈥div:hover span鈥鏀瑰彉鏂囧瓧鐨棰滆壊銆傚鏋滄枃瀛楁病鏈夋爣绛撅紝搴旇鍏堝姞涓婃爣绛炬墠鍙互璁剧疆銆
