Delphi with TMS Web Core : hover and TWebCSSClass component

Question

What would be the best way to change the style of a control when the mouse is over ?

I didn't saw this feature with the TWebCSSClass component.

I can do this using TWebCSSClass components, but then I have to use the MouseEnter / MouseLeave events of the control. For example here, I use 2 TWebCSSClass components, and I change the ElementClassName of my control from my-btn-style to my-btn-style-hover using 2 differents TWebCSSClass

procedure TForm1.WebButton1MouseEnter(Sender: TObject);
begin
  webbutton1.ElementClassName := 'my-btn-style-hover';
end;

procedure TForm1.WebButton1MouseLeave(Sender: TObject);
begin
  webbutton1.ElementClassName := 'my-btn-style';
end;

it works, but then I will have to manage each control's mouse events individually, witch is not convenient if I want to do this for several similar controls.

I suppose there is a better way to manage this.

thanks

Answer 1

Use two TWebCSSClass components.

For the first, use CSSClassName "my-btn-style". For the second, use CSSClassName "my-btn-style:hover". Just append :hover to the css class name.

Now set the ElementClassName of your button or other control to "my-btn-style".

CSS properties in the second TWebCSSClass component will automatically override those in the first component when the mouse is over the button control.

The DFM of a sample form:

object Form1: TForm1
  Width = 640
  Height = 480
  object WebButton1: TWebButton
    Left = 48
    Top = 72
    Width = 265
    Height = 81
    Caption = 'Click Me'
    ElementClassName = 'my-btn-style'
    HeightPercent = 100.000000000000000000
    WidthPercent = 100.000000000000000000
  end
  object cssButtonStyle: TWebCSSClass
    BackgroundColor = clHotLight
    CSSClassName = 'my-btn-style'
    Opacity = 1.000000000000000000
    Left = 72
    Top = 216
  end
  object cssButtonStyleHover: TWebCSSClass
    BackgroundColor = clGreen
    CSSClassName = 'my-btn-style:hover'
    Opacity = 1.000000000000000000
    Left = 176
    Top = 224
  end
end

Properties in the Object inspector: