鼠标悬浮/点击/离开超级链接时改变颜色

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

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

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

3.1 添加加载结束后事件

方法一：

打开模板，点击模板>模板 Web 属性>分页预览设置，设置为为该模板单独设置，在下方添加一个加载结束后事件，如下图：

添加加载结束事件之后，在 JS 输入框中输入如下所示语句：

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

方法二：

添加加载结束事件之后，在 JS 输入框中输入如下所示语句：

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

3.2 效果查看

点击分页预览，将鼠标移至超级链接上的时候就能实现如上图所示的效果。

模板保存在%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接颜色变化.cpt

在线查看模板效果请点击 超级链接颜色变化 .cpt

关键字：鼠标悬浮/点击/离开超链时改变颜色

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