JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接改變網(wǎng)頁(yè)背景顏色的方法
更新時(shí)間：2015年10月20日 09:51:39 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接改變網(wǎng)頁(yè)背景顏色的方法,涉及js響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鏈接改變網(wǎng)頁(yè)背景顏色的方法。分享給大家供大家參考，具體如下：
這個(gè)小特效很不錯(cuò)，用鏈接改變網(wǎng)頁(yè)背景色，鼠標(biāo)放上鏈接文字上，網(wǎng)頁(yè)背景就會(huì)跟著變換，想讓你的主頁(yè)更個(gè)性一點(diǎn)的朋友，這個(gè)代碼一定能用上，其實(shí)你可在此基礎(chǔ)上修改一下代碼，改成鼠標(biāo)放上文字切換樣式表，這樣整個(gè)網(wǎng)頁(yè)就變了風(fēng)格，是不是很實(shí)用？
運(yùn)行效果截圖如下：
在線(xiàn)演示地址如下：
http://demo.jb51.net/js/2015/js-mouse-over-link-cha-bgcolor-demo/
具體代碼如下：
<html>
<head>
<title>鼠標(biāo)放上鏈接改變網(wǎng)頁(yè)背景顏色</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript">
function goHist(a)
{
history.go(a);
}
</script>
</head>
<body>
<center>
<h2>鼠標(biāo)放到相應(yīng)鏈接上看看！</h2>
<table border=1 borderlight=green style="border-collapse: collapse" cellpadding="5" cellspacing="0">
<tr><td align=center>
<a href="#" onMouseOver="document.bgColor='skyblue'">天空藍(lán)</a>
<a href="#" onMouseOver="document.bgColor='red'">大紅色</a>
<a href="#"onMouseOver="document.bgColor='#0066CC'">清新藍(lán)</a>
</td></tr>
</table>
</center>
</body>
</html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
本文通過(guò)一系列代碼片段,詳細(xì)介紹了如何使用JavaScript進(jìn)行DOM操作、事件處理、屬性操作、內(nèi)容操作、尺寸和位置獲取,以及實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果,涵蓋了基礎(chǔ)和高級(jí)技術(shù)點(diǎn),適合初學(xué)者和進(jìn)階開(kāi)發(fā)者,感興趣的朋友一起看看吧2025-01-01
ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回，感興趣的朋友一起來(lái)學(xué)習(xí)2015-08-08
js 父窗口控制子窗口的行為-打開(kāi)，關(guān)閉，重定位，回復(fù)
技術(shù)要點(diǎn)可以利用windows的open和closed來(lái)對(duì)子窗口的控制,需要父窗口和子窗口之間進(jìn)行互動(dòng)。2010-04-04
這篇文章主要介紹了詳解html-webpack-plugin用法全解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
下面小編就為大家?guī)?lái)一篇JS正則替換掉小括號(hào)及內(nèi)容的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
js中利用cookie實(shí)現(xiàn)記住密碼功能
這篇文章主要為大家詳細(xì)介紹了js中利用cookie實(shí)現(xiàn)記住密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
javascript中對(duì)變量類(lèi)型的判斷方法
在JavaScript中，有5種基本數(shù)據(jù)類(lèi)型和1種復(fù)雜數(shù)據(jù)類(lèi)型，基本數(shù)據(jù)類(lèi)型有：Undefined, Null, Boolean, Number和String；復(fù)雜數(shù)據(jù)類(lèi)型是Object，Object中還細(xì)分了很多具體的類(lèi)型，比如：Array, Function, Date等等2015-08-08
這篇文章主要介紹了在uni-app中踩過(guò)的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Invalid?Host?header問(wèn)題該如何解決的幾種方式
Invalid Host header是一個(gè)常見(jiàn)的錯(cuò)誤信息,通常發(fā)生在Web應(yīng)用程序中,下面這篇文章主要給大家介紹了關(guān)于Invalid?Host?header問(wèn)題該如何解決的幾種方式,需要的朋友可以參考下2024-09-09