Morfik Tips: How to handle MouseOver and MouseOut efficiently
January 27, 2007I owe you with an article on AnalogClock internals, but today we are in for a quick tip.
What I wanted to do is: create a hover effect (i.e. the entire row is highlighted when the mouse is over) for continuous forms.
First I put a Container on the continuous form and placed all the other text controls and checkboxes and others on the Container (since the Detail does not have OnMouseOver/Out events), then set up the Container for OnMouseOver and OnMouseOut. It fundamentally worked, but the hovering effect was slooow and sometimes did not even register on some of the lines (depending on how fast I moved the mouse pointer).
I though the issue was related to the way the controls contained by Container bubble these events to Container. So I simply set the OnMouseOver/Out event handlers for all controls to the same event handlers and bingo! now it works properly. The exact code sample is below:
Procedure TestForm.InfoContainerMouseOut(Event: TDOMEvent); Begin SwitchBandIndex( Event ); InfoContainer.DOMStyle.backgroundColor := 'White'; End;
Procedure TestForm.InfoContainerMouseOver(Event: TDOMEvent); Begin SwitchBandIndex( Event ); InfoContainer.DOMStyle.backgroundColor := 'LightBlue'; End;
Now there are two more items I have to explain:
- SwitchBandIndex() will do some magic for continuous forms, making sure that by using controls like InfoContainer you will access the right instance of that control (since there are as many instances, as many bands/lines in your continuous forms are);
- DOMStyle is another magic property of all controls through which you can access and manipulate the style of the underlying HTML control: here I set the backgrtound color of the InfoContainer (for the technically more inclined: it is a DIV deep inside).
That’s it. Clean and simple. Now if we could manipulate the :hover pseudo-class easily…
