带有TMS Web Core的 Delphi ：hover和TWebCSSClass组件

wnvonmuf 于 9个月前发布在其他

关注(0)|答案(1)|浏览(116)

当鼠标结束时，更改控件样式的最佳方法是什么？
我在TWebCSSClass组件中没有看到这个功能。
我可以使用TWebCSSClass组件完成此操作，但必须使用控件的MouseEnter / MouseLeave事件。例如，这里使用了2个TWebCSSClass组件，并将控件的ElementClassName从 my-btn-style 更改为 my-btn-style-hoverusing 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;

字符串
它的作品，但我将不得不管理每个控件的鼠标事件单独，巫婆是不方便，如果我想这样做的几个类似的控件。
我想有一个更好的方法来管理它。
谢谢

delphi

来源：https://stackoverflow.com/questions/77616295/delphi-with-tms-web-core-hover-and-twebcssclass-component

1条答案

按热度按时间

ibps3vxo1#

使用两个TWebCSSClass组件。
对于第一个，使用CSSClassName "my-btn-style"。对于第二个，使用CSSClassName "my-btn-style:hover"。只需将:hover追加到css类名。
现在将按钮或其他控件的ElementClassName设置为"my-btn-style"。
当鼠标移到按钮控件上时，第二个TWebCSSClass组件中的CSS属性将自动覆盖第一个组件中的CSS属性。
示例表单的DFM：

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

字符串
“对象”检查器中的属性：

的数据