效果体验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. 借助 Lucene.Net 构建站内搜索引擎（下）

    前言:上一篇我们学习了Lucene.Net的基本概念.分词以及实现了一个最简单的搜索引擎,这一篇我们开始开发一个初具规模的站内搜索项目,通过开发站内搜索模块,我们可以方便地在项目中集成站内搜索功能.本 ...

  2. Linux 自动同步服务器时间

    200 ? "200px" : this.width)!important;} --> 介绍 Linux服务器运行久时,系统时间就会存在一定的误差,本篇文章就来介绍怎样使服务 ...

  3. 跟vczh看实例学编译原理——三：Tinymoe与无歧义语法分析

    文章中引用的代码均来自https://github.com/vczh/tinymoe.   看了前面的三篇文章,大家应该基本对Tinymoe的代码有一个初步的感觉了.在正确分析"print ...

  4. 基于GIS的旅游辐射区人口统计

    在旅游规划中,考虑旅游景点周边的人口负载量是很重要的一个方面,这将直接影响资源的投入和配置,开发潜力和规模等.基于GIS可以将人口信息进行空间化的展示,还可以通过空间分析的方法计算出旅游景点辐射区的人 ...

  5. 非正规方法处理AngulurJS模块管理问题

    1.起因 自己一直做winform,有幸从某个大神手里接了一个node.js,express,angulurJS等集众多开源框架的一个项目,赶鸭子上架,于是一边学习,一边用自己以往的思中去整理,重构代 ...

  6. 《Entity Framework 6 Recipes》中文翻译系列 (26) ------ 第五章 加载实体和导航属性之延缓加载关联实体和在别的LINQ查询操作中使用Include()方法

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-7  在别的LINQ查询操作中使用Include()方法 问题 你有一个LINQ ...

  7. LeetCode Note 1st,practice makes perfect

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  8. 为什么可以说Java语言是准动态语言？

    什么是动态语言? 动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化.比如JavaScript便是一个典型的动态语言. 除此之外如Ruby.Python ...

  9. 大叔也学Xamarin系列

    回到占占推荐博客索引 我就是我,请叫我仓储大叔 大叔听很多客户说,xamarin的资料网上太少了,是的,大叔也相信,因为大叔在学xamarin里确实很费劲,只能看看androd for java了,呵 ...

  10. JSON数据的定义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...