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

  • 文档创建者:印然
  • 编辑次数:12次
  • 最近更新:Kevin-s 于 2019-06-20
  • 1. 描述

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

    222

    2. 思路

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

    3. 操作步骤

    我们以模板%FR_HOME%\webapps\webroot\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%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接颜色变化.cpt

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

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


    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!