1.1 问题描述

在使用超级链接的时候，希望实现鼠标移至超级链接，该超级链接就改变字体颜色，以便区分当前选中的是哪个超级链接，提升用户体验，如下图所示：

1.2 解决思路

给模板添加一个「加载结束」事件，在事件中获取到超级链接单元格对象，然后添加鼠标滑过事件，鼠标放到该对象上的时候就改变字体颜色，离开时就恢复原来的颜色。

2.1 准备模板

我们以模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接解决Internet脚本运行慢示例主报表.cpt为例，实现当鼠标移至超级链接的时候改变颜色。

2.2 添加加载结束事件

打开模板，点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，在下方添加一个「加载结束」事件，输入 JavaScript 代码如下：

$("td span.linkspan").bind("mouseover",function(){
$(this).css("color","red");
}).bind("mouseleave",function(){
$(this).css("color","blue");
})

或者输入 JavaScript 代码如下：

$('.linkspan').mouseover(function(){$(this).css('color','red');}); //鼠标移上 
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //鼠标离开 
$('.linkspan').mousedown(function(){$(this).css('color','green');}); //鼠标点击 

步骤如下图所示：

2.3 效果预览

保存报表，点击「分页预览」，效果如下图所示：

注：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接颜色变化.cpt

点击下载模板：超级链接颜色变化.cpt