Delphi TMS Web Core：如何通过TWebCSSClass实现控件鼠标悬停样式切换？

优先推荐使用CSS原生的:hover伪类来实现，这是最简洁高效的方式，无需编写任何鼠标事件处理代码，且能批量作用于所有同类控件。

方法一：纯CSS伪类实现（推荐） #

1. 定义包含悬停效果的CSS规则 #

可以通过TWebCSSClass组件添加，直接在其CSS属性中编写：

/* 基础按钮样式 */
.my-btn-style {
  background-color: #e0e0e0;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s; /* 可选：添加过渡动画 */
}

/* 鼠标悬停时的样式 */
.my-btn-style:hover {
  background-color: #bdbdbd;
  cursor: pointer;
}

也可以直接将这段CSS写入项目的全局样式文件中。

2. 给控件应用基础类名 #

只需将目标控件的ElementClassName属性设置为my-btn-style即可，浏览器会自动在鼠标悬停时触发:hover对应的样式，无需额外Delphi代码。

方法二：动态控制悬停效果（灵活场景） #

如果需要根据业务逻辑动态启用/禁用悬停效果，可以通过类组合实现：

1. 定义控制悬停的CSS类：

.hover-active:hover {
  background-color: #bdbdbd;
  cursor: pointer;
}

2. 在Delphi代码中给目标控件添加/移除该类：

// 启用悬停效果
WebButton1.ElementClassName := WebButton1.ElementClassName + ' hover-active';

// 禁用悬停效果
WebButton1.ElementClassName := StringReplace(WebButton1.ElementClassName, ' hover-active', '', [rfReplaceAll]);

方法三：事件委托批量处理（需结合逻辑场景） #

如果悬停时需要执行额外业务逻辑，同时不想逐个绑定控件事件，可以用父容器事件委托批量处理：

procedure TForm1.WebPanel1MouseEnter(Sender: TObject);
var
  TargetCtrl: TControl;
begin
  TargetCtrl := FindControl(TJSHTMLElement(Sender).target);
  if TargetCtrl is TWebButton then
    TWebButton(TargetCtrl).ElementClassName := TWebButton(TargetCtrl).ElementClassName + ' my-btn-style-hover';
end;

procedure TForm1.WebPanel1MouseLeave(Sender: TObject);
var
  TargetCtrl: TControl;
begin
  TargetCtrl := FindControl(TJSHTMLElement(Sender).target);
  if TargetCtrl is TWebButton then
    TWebButton(TargetCtrl).ElementClassName := StringReplace(TWebButton(TargetCtrl).ElementClassName, ' my-btn-style-hover', '', [rfReplaceAll]);
end;

将所有需要处理的控件放入同一个父容器（如TWebPanel），只需给父容器绑定一次事件，即可批量处理所有子控件的悬停逻辑。

内容的提问来源于stack exchange，提问作者Manuh