hover

蚂蚁动态卡片支持配置 hover 属性,通过 hover 属性配置节点样式。当手势点击具有 hover 配置的节点时,该节点显示 hover 属性配置的样式,当手势离开该节点时恢复原始样式。

样式

目前支持以下两个 hover 样式:

属性

值类型

默认值

写法

备注

background-color

色彩单位

0

background-color:red;

hover 发生时的背景色变化。

color

色彩单位

-

color:rgb(255,0,255);

hover 发生时的字体颜色变化。

示例

<text
  class="normal-text"
  value="06.hover + touchcancel"
  :hover="hoverDic"
></text>

data: {
    hoverDic: {
      backgroundColor: "#7b8b6f",
      color: "white"
    }
 }   

注意事项

使用 hover 属性时,需注意以下几点:

  • 不支持手势移动检测 hover 变化,即 hover 仅支持点击状态变化。

  • 不支持向上透传,即叶子节点优先响应 hover 事件,并且同时最多一个节点响应 hover 事件。

    例如,A 和 B 两个节点都有 hover 属性,并且 B 是 A 的子节点,则当 B 触发 hover 事件时,A 不会再触发 hover 事件。

  • 遵循 touch 事件拦截规则,即子节点如果响应 hover 或 touch 事件,则父节点不再响应 hover 或 touch 事件。

    例如,A 和 B 两个节点,B 是 A 的子节点,如果 B 响应 hover 事件或 touch 事件,则 A 不再响应 hover 或 touch 事件。

  • 平台差异。受现有手势能力的平台差异影响,具有 hover 属性的节点在动画过程中(位移动画)的响应在不同平台表现不同。Android 平台支持位移动画轨迹过程中的 hover 响应;iOS 平台不支持位移动画轨迹过程中的 hover 响应。

示例代码

单击此处 detailHover.zip 获取完整示例代码。

阿里云首页 移动开发平台 mPaaS 相关技术圈