We got the question how to add a hover effect to a control in Xojo for a web application. For a CSS file to the application, you can of course just use the :hover pseudo class to add whatever effects you like. But here we like to add the effect on the fly in code to a label as needed.
Here is a code snippet showing how we add three mouse event handlers in JavaScript to change the color:
Var s As String = "document.getElementById('"+Label1.ControlID+"')."
Var s1 As String = s + "addEventListener('mouseenter', function() { this.style.color='red'; });"
Var s2 As String = s + "addEventListener('mouseout', function() { this.style.color='green';});"
Var s3 As String = s + "addEventListener('mouseover', function() { this.style.color='yellow';});"
Me.ExecuteJavaScript s1
Me.ExecuteJavaScript s2
Me.ExecuteJavaScript s3
As you see we use ControlID to know what random six digit code is used internally to reference this control. With document.getElementById() we can find the control. Once we grabbed the control, we can use addEventListener to add the event and put in a function to do the style change.
Please try and let me know if this works for you.
