JS控制鼠标悬浮/离开按钮背景色

1. 概述
1.1 问题描述

场景描述：当鼠标初次悬浮于该控件时，从初始的红色变为蓝色，移开变浅，之后每次将鼠标悬浮于上皆呈现蓝色。

效果图如下：

1.2 实现思路

监听控件事件，在不同监听事件下触发不同的效果。

2. 示例2.1

操作步骤

新建工作簿，右击 B2 单元格，选择控件设置，类型选择按钮控件，如图：

添加一个初始化后事件，代码如下：

1. var el = this.element.children();
   
2. // 获取当前控件
   
3. el.css('background', 'red');
   
4. // 默认红色
   
5. el.hover(function(e) {
   
6. // 控件的鼠标监听
   
7.         $(this).css('background', 'blue');
   
8.         // 悬移改为蓝色
   
9. }, function(e) {
   
10.         $(this).css('background', '#abc');
    
11.         // 移除变为灰色
    
12. });

复制代码

2.2 预览效果

保存模板，选择填报预览，实现效果下图所示：

注：经过测试，手机端和 H5 不支持该效果。

3. 模板下载

模板效果在线查看请点击：JS 控制鼠标悬浮离开按钮背景色.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\19-JS控制鼠标悬浮离开按钮背景色.cpt

点击下载模板 ：19-JS控制鼠标悬浮离开按钮背景色.cpt

哪还有点击后的颜色呢？