I. Overview
1.1 Problem
When the mouse is hovering over the widget for the first time, it changes from the initial red color to blue, and then becomes grey when the mouse is moved away. Afterwards, it turns blue every time the mouse is hovered on it.
The effect is as follows:
1.2 Solution
Monitor widget events, and trigger different effects under different monitoring events.
Note: The mobile devices does not support this function
II. Example
2.1 Template preparation
Create a new workbook, right-click cell B2, select [widget Settings], and select [Button widget]
2.2 Add event
Add an [event after initialization], the JS is as follows:
var el = this.element.children();
// get current widget
el.css('background', 'red');
// default is red
el.hover(function(e) {
// monitor mouse event
$(this).css('background', 'blue');
// turn blue on hover
}, function(e) {
$(this).css('background', '#abc');
// turn grey on moving away
});
2.3 Preview effect
Save the template and select [Data Entry Preview] to achieve the effect as shown in the figure below:
Previous：JS Edit widget on click once
