历史版本11 :超级链接改变颜色 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
在使用超级链接的时候，希望实现鼠标移至超级链接，该超级链接就改变字体颜色，以便区分当前选中的是哪个超级链接，提升用户体验，如下图所示：
2. 思路编辑
当模板加载完成之后，我们给它添加一个加载结束事件，用jQuery在事件中获取到超级链接单元格对象，然后添加鼠标滑过事件，鼠标放到该对象上的时候就改变字体颜色，离开时就恢复原来的颜色。
3. 操作步骤编辑
我们以模板%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
关键字：鼠标悬浮/点击/离开超链时改变颜色