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

编辑
文档创建者:印然 (67260 )     浏览次数:3145次     编辑次数:10次     最近更新:jiangsr 于 2017-11-14     

目录:

1. 描述编辑

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

222

2. 实现思路编辑

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

3. 实现步骤编辑

我们以模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接解决Internet脚本运行慢示例主报表.cpt为例,实现当鼠标移至超级链接的时候改变颜色。
3.1 添加加载结束后事件
方法一:
打开模板,点击模板>模板web属性>分页预览设置,设置为为该模板单独设置,在下方添加一个加载结束后事件,如下图:

222

添加加载结束事件之后,在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%\WebReport\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接颜色变化.cpt
在线查看模板效果请点击超级链接颜色变化.cpt

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

附件列表


主题: 专题总结
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: