PC应用内组件如何实现悬浮样式Hover效果
======================

#### 问题现象

PC应用如何实现鼠标悬停在组件上时，组件UI效果变更？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7c/v3/hC5wTvM6T6CXMLIWueaSSA/zh-cn_image_0000002628395472.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134046Z&HW-CC-Expire=86400&HW-CC-Sign=DFCB7E9DDA18F83505C17DC05F4790BE6387EF6900E2973297C2DD3198FA3BF8 "点击放大")

#### 背景知识

*   [@Styles](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-style)：@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式，仅仅应用于静态页面的样式复用。
*   [stateStyles](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-statestyles)：stateStyles可以依据组件的内部状态的不同，快速设置不同样式。stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下五种状态：focused、normal、pressed、disabled、selected。

#### 解决方案

例如按钮的默认状态、按下状态、禁用状态可以将@Styles与stateStyles组合使用来实现对应效果，悬浮状态还需要结合[onHover](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-events-hover)事件来实现。

_//_ _定义在全局的Button样式_
@Styles
function globalButtonStyle() {
  .width(160)
  .height(80)
  .borderRadius(16);
}

@Entry
@Component
struct CustomerButton {
  @State isHover: boolean \= false;

  _//_ _定义在组件内的@Styles封装的样式_
  _// Disable_
  @Styles
  disabledStyle(){
    .backgroundColor('#A8B8F7');
  }

  _// normal_
  @Styles
  normalStyle() {
    .backgroundColor('#0A59F7');
  }

 _ // pressed_
  @Styles
  pressedStyle() {
    .backgroundColor('#0950DE');
  }

  _// hover_
  @Styles
  hoverStyle() {
    .backgroundColor(this.isHover ? '#0954EA' : '#0A59F7');
  }

  build() {
    Column() {
      Row() {
        Text('Default')
          .width(120)
          .fontSize(30);
        Button('默认状态', { type: ButtonType.Normal, stateEffect: false })
          .globalButtonStyle()
          .fontSize(30)
          .stateStyles({
            normal: this.normalStyle
          });
      }
      .margin({
        bottom: 20
      });

      Row() {
        Text('Pressed')
          .width(120)
          .fontSize(30);
        Button('按下状态', { type: ButtonType.Normal, stateEffect: false })
          .globalButtonStyle()
          .fontSize(30)
          .stateStyles({
            normal: this.normalStyle,
            pressed: this.pressedStyle,
          });
      }
      .margin({
        bottom: 20
      });

      Row() {
        Text('Hover')
          .width(120)
          .fontSize(30);
        Button('悬浮状态', { type: ButtonType.Normal, stateEffect: false })
          .globalButtonStyle()
          .fontSize(30)
          .onHover((isHover: boolean) \=\> {
            console.info(\`${isHover}\`);
            this.isHover \= !this.isHover;
          })
          .stateStyles({
            normal: this.hoverStyle
          });
      }
      .margin({
        bottom: 20
      });

      Row() {
        Text('Disable')
          .width(120)
          .fontSize(30);
        Button('禁用状态', { type: ButtonType.Normal, stateEffect: false })
          .globalButtonStyle()
          .fontSize(30)
          .enabled(false)
          .stateStyles({
            disabled: this.disabledStyle
          });
      }
      .margin({
        bottom: 20
      });
    }
    .padding({ top: 20 })
    .width('100%')
    .justifyContent(FlexAlign.Center);
  }
}