Hover

Hover State Layer (ホバーステートレイヤー)

別名 Hover State, State layer, Hover overlay

半透明のオーバーレイが要素に色を重ね、ポインターが乗っていることを示します。

デザインシステムのコンポーネント

  • Hover
  • Focus
  • Pressed
  • Dragged
  • Selected
  • Activated

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にホバーステートレイヤー(Hover State Layer)を追加してください。ホバーステート(hover state)、ステートレイヤー(state layer)、ホバーオーバーレイ(hover overlay)とも呼ばれます。
ポインターを乗せている間、コンテンツ色の薄い半透明オーバーレイが要素の上にすばやくフェードインし、離れるとフェードアウトするようにしてください。
コントラストを損なわないようごく薄くし、フォーカス時と押下時にも同じレイヤーの仕組みを使ってください。

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。