效果体验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. 干掉Unity3D

    我为什么想干掉Unity3D? 这个问题容我不答,每个做技术的人总有一些完美主义. 你使用u3d的过程中是不是痛并快乐着呢. 就从两个国内具有相当普遍性的痛点说起. il2cpp,unity作出了这个 ...

  2. nginx小记

    上一次折腾nginx还是两年前的事情了.好多配置都忘记了. 捣腾了下阿里云,部署了一下,遇到几个小问题,温故并记录一下吧 :) 重新设置 nginx遇到问题:nginx: [error] invali ...

  3. 内存提取SWF，破解doswf方法概述

    参考文献: http://blog.ceflash.com/%E5%86%99%E7%82%B9swf%E4%BA%8C%E8%BF%9B%E5%88%B6%E7%9A%84%E4%B8%9C%E8% ...

  4. Ubuntu 安装OpenERP

    网上的都TM不靠谱.... 1.用root登录,修改/etc/apt/sources.list 文件 sudo /etc/apt/sources.list u root 注意一定要加U root否则没 ...

  5. Disk IO Performance

    一,使用 Performance counter 监控Disk IO问题 1,Physical Disk vs. Logical Disk Windows可以在一个Physical Disk上划出若干 ...

  6. [汇编与C语言关系]2. main函数与启动例程

    为什么汇编程序的入口是_start,而C程序的入口是main函数呢?以下就来解释这个问题 在<x86汇编程序基础(AT&T语法)>一文中我们汇编和链接的步骤是: $ as hell ...

  7. 深入理解javascript中的焦点管理

    × 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...

  8. 亚马逊云架设WordPress博客

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 这篇文章介绍如何在亚马逊云架设WordPress博客.最强的云,加上最流行的建站工 ...

  9. Util应用程序框架公共操作类(十二):Lambda表达式公共操作类(三)

    今天在开发一个简单查询时,发现我的Lambda操作类的GetValue方法无法正确获取枚举类型值,以至查询结果错误. 我增加了几个单元测试来捕获错误,代码如下. /// <summary> ...

  10. iOS开发之窥探UICollectionViewController(五) --一款炫酷的图片浏览组件

    本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectio ...