jquery改变链接移上光标时的颜色实例
效果体验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
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
2012-12-18 各型号英特尔CUP的功率