Button组件如何设置 `hover` 的样式？

Question

在PC端，当鼠标悬停在按钮上时能改变它的外观，比如背景色变亮一点。可以通过.stateStyles设置 hover状态吗？

Answer 1

可以。在传递给.stateStyles()的对象中，添加一个hover键，并在其对应的值对象中设置鼠标悬停时要应用的样式属性。

Button("Hover Effect Button")
  .width(160).height(50)
  .stateStyles({
    normal: {backgroundColor: Color.Teal},
    pressed: {backgroundColor: Color.DarkCyan // 按下的颜色},
    hover: { 
          // 定义悬停状态样式
         backgroundColor: Color.LightSeaGreen // 悬停时背景变亮
         .scale({ x: 1.03, y: 1.03 }) // 可以加其他效果，比如轻微放大},
    disabled: {backgroundColor: Color.Gray}
  })
  .fontColor(Color.White)
  .onClick(() => {})
  .focusable(true)