效果體驗http://hovertree.com/texiao/jquery/18/
也可以點擊下面按鈕看看
首頁 特效
下面的鏈接，未訪問的鏈接為藍色，訪問過的鏈接為黑色，鼠標經過時鏈接為綠色，改變顏色後鼠標經過為紅色 或者設置的顏色。
原文
jQuery
JQuery實現錨點平滑滾動
哎呦，不錯哦，JavaScript
下雨特效
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery設置a:hover 顏色樣式 - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<style type="text/css">
a{color:pink;font-size:32px}
a.hovertree{text-decoration:none;font-size:32px;color:blue}
a.hovertree:visited{color: #333333;}
a.hovertree:hover {
color: #00FF00;
text-decoration:underline;
}
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script>
//改變全部鏈接顏色
function changeAllHovertree(color) {
if (color == undefined || color == "") color = "red";
$("a").on("mouseover", function () { $(this).css("color", color) }).on("mouseleave", function () { $(this).css("color", "") })
}
//改變指定鏈接顏色
function changeHovertree(idhovertree, classhovertree, color) {
if (color == undefined || color == "") color = "red";
if (classhovertree == undefined || classhovertree == "")
classhovertree = ".hovert" + "ree";
else
classhovertree = "." + classhovertree;
if (idhovertree == '')
$("a" + classhovertree).on("mouseover", function () { $(this).css("color", color) }).on("mouseleave", function () { $(this).css("color", "") })
else
$("#" + idhovertree).on("mouseover", function () { $("#" + idhovertree).css("color", color) }).on("mouseleave", function () { $("#" + idhovertree).css("color", "") })
}
</script>
</head>
<body>
<div>
<div>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a><br /><br />
下面的鏈接，未訪問的鏈接為藍色，訪問過的鏈接為黑色，鼠標經過時鏈接為綠色，改變顏色後鼠標經過為紅色 或者設置的顏色。
</div><br /><input type="button" value="改變下面全部鏈接鼠標經過的顏色" onclick="changeHovertree('')" /><br />
<a id="ahovertree" href="http://hovertree.com/h/bjae/jqueryhover.htm" class="hovertree">原文</a>
<input type="button" value="改變鼠標經過顏色" onclick="changeHovertree('ahovert'+'ree')" /><br />
<a id="bhovertree" href="http://hovertree.com/menu/jquery/" class="hovertree">jQuery</a>
<input type="button" value="改變鼠標經過顏色為粉色" onclick="changeHovertree('bhovertree', '', 'pink')" /><br />
<a id="chovertree" href="http://hovertree.com/hvtart/bjae/e367418912caa0b8.htm" class="hovertree">JQuery實現錨點平滑滾動</a>
<input type="button" value="改變鼠標經過顏色" onclick="changeHovertree('chov'+'ertree')" /><br />
<a id="dhovertree" href="http://hovertree.com/hvtart/bjae/vgkgit00.htm" class="hovertree">哎呦，不錯哦，JavaScript</a>
<input type="button" value="改變鼠標經過顏色" onclick="changeHovertree('dhover'+'tree')" /><br />
<a id="ehovertree" href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm" class="hovertree">下雨特效</a>
<input type="button" value="改變鼠標經過顏色" onclick="changeHovertree('eh'+'overtree')" /><br />
<input type="button" value="改變頁面中全部鏈接鼠標經過的顏色為淺灰色" onclick="changeAllHovertree('silver')" />
</div>
</body>
</html>