效果体验http://hovertree.com/texiao/jquery/18/

完整代码如下：

<!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>

相关内容： http://www.cnblogs.com/roucheng/p/texiao.html

jquery改变链接移上光标时的颜色实例的更多相关文章

  1. jQuery实现鼠标移上弹出提示框，移出消失

    <TD>里有一行数据 "那片笑声让我想起......"  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...

  2. 触发按钮改变panel面板上的小圆圈颜色

    import javax.swing.*; import java.awt.event.*; import java.awt.*; public class TouChaCol implements ...

  3. WPF，通过修改dataGrid的cell的style，改变选中行失去焦点时的颜色 4.0可用

    <Style TargetType="{x:Type DataGridCell}"> <Style.Triggers> <Trigger Proper ...

  4. 【WPF】通过修改dataGrid的cell的style，改变选中行失去焦点时的颜色

    <Style TargetType="{x:Type DataGridCell}"> <Style.Triggers> <Trigger Proper ...

  5. 使用size()方法输出列表中的元素数量。需要注意的是，这个方法返回的值可能不是真实的，尤其当有线程在添加数据或者移除数据时，这个方法需要遍历整个列表来计算元素数量，而遍历过的数据可能已经改变。仅当没有任何线程修改列表时，才能保证返回的结果是准确的。

    使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没 ...

  6. jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因

    今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...

  7. 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  8. JQuery - 改变css样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  9. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

随机推荐

  1. Python黑帽编程2.1 Python编程哲学

    Python黑帽编程2.1  Python编程哲学 本节的内容有些趣味性,涉及到很多人为什么会选择Python,为什么会喜欢这门语言.我带大家膜拜下Python作者的Python之禅,然后再来了解下P ...

  2. 当程序以Windows Services形式启动时当前路径不对

    当程序以Windows Services形式启动时当前路径不对 @(操作系统)[博客|dotNet] 很多时候我们需要将我们的程序写成利用Windows服务的形式来让它能够自启动.今天遇到一个问题,当 ...

  3. [nRF51822] 8、基础实验代码解析大全 · 实验11 - PPI

    前一篇分析了前十个基础实验的代码,从这里开始分析后十个~ 一.PPI原理: PPI(Programmable Peripheral Interconnect),中文翻译为可编程外设互连. 在nRF51 ...

  4. C#设计模式之职责链

    Iron之职责链 需求: "Iron"的建造一直没有停止,现在单个部件是有的,但是在部件从工厂里出来的时候,在组装到一起之前,我们还是非常有必要对部件进行质量检测,或者是其它个方面 ...

  5. Generate input file for OVITO

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  6. Windows Azure Storage (17) Azure Storage读取访问地域冗余(Read Access – Geo Redundant Storage, RA-GRS)

    <Windows Azure Platform 系列文章目录> 细心的用户会发现,微软在国外和国内的数据中心建设都是成对的,比如香港数据中心(Asia East)和新加坡的数据中心(Sou ...

  7. 解决OracleConnection ORA-1017 和 HRESULT:0x8007000B 错误

    试图加载格式不正确的程序. (异常来自HRESULT:0x8007000B) 解决方案: IIS下 winform下: ORA-1017 错误

  8. Sublime Text执行js

    Sublime Text执行js 在Build Sytem添加以下内容: { "cmd": ["node", "$file"], " ...

  9. Leetcode-268 Missing Number

    #268.  Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find ...

  10. MongoDB 创建 Database 和 Collection

    在开始使用MongoDB(Version:3.2.9)之前,必须首先在MongoDB中创建 Database 和 Collection.Database是相互独立的,每个Database都有自己的Co ...