效果体验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. 常用SQL[ORACLE]

        1.常用系统函数 2.常用sql语句 3.一些定义和关键字 4.需要注意点   1.常用系统函数 ↑ --decode decode(column,if_value,value,elseif_ ...

  2. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  3. 《CLR.via.C#第三版》第二部分第6，7章节读书笔记(三)

    第6章讲的是类型和成员基础 重要认知:虚方法 虚方法的设计原则:设计一个类型时,应尽量减少所定义的虚方法的数量. 首先,调用虚方法的速度比调用非虚方法慢. 其次,JIT编译器不能内嵌虚方法,这进一步影 ...

  4. 跟我一起数据挖掘（22）——spark入门

    Spark简介 Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行,Spark,拥有Hadoop MapReduce所具有的优点:但不同于MapR ...

  5. atom-shell程序打包

    上一篇:http://www.cnblogs.com/luobenCode/p/4504910.html 打包之前要准备一下 请看这篇http://www.cnblogs.com/seanlv/arc ...

  6. Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构

    Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型  按查找 ...

  7. Python框架之Tornado（四）源码之褪去模板外衣的前戏

    执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornado模板做准备,也是由于该知识点使用的巧妙,所有就单独用一篇来介绍了.废话不多说,直接上代码: # ...

  8. 替代jquery1.9版本以前的toggle事件函数（开关）

    以上文章为转载自http://blog.sina.com.cn/s/blog_50042fab0101c7a9.html var flag=1; $(".selector").cl ...

  9. Index的填充属性：FillFactor 和 PAD_INDEX

    在Create Index时,必须考虑属性FillFactor 和 PAD_INDEX的设置,这两个属性只在create index 或 rebuild index时起作用,表示Index page( ...

  10. 深入学习jQuery节点关系

    × 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形 ...