Lism Tips

マウスを乗せたとき（-hov）

マウスを乗せたときに色・背景・影・位置などを変える -hov クラスの3つの形と、変化をなめらかにする方法をまとめています。

マウスを乗せたとき（hover。ホバー）に見た目を変えるには、-hov: で始まるクラスを使います。色や影を変える、下線を出す、親に乗せたら子を変える、の3つの形があります。

どんなときに使う？#

  • ボタンやリンクにマウスを乗せたら、背景や文字の色を変えたいとき
  • カードにマウスを乗せたら、影を付けて少し浮かせたいとき
  • 画像の上にマウスを乗せたら、説明の文字を出したいとき

3つの形#

形 すること
-hov:-{prop} マウスを乗せたら、1つの性質（色・影など）を --hov-{prop} 変数の値に変える
-hov:{preset} マウスを乗せたら、名前の付いたスタイルのまとまり（プリセット）をかける
-hov:in:{preset} 親（set--hov を付けた要素）にマウスを乗せたら、子の見た目を変える

-hov:-{prop} と -hov:{preset} は、マウスでホバーできる機器（@media (any-hover: hover)）でだけ効きます。

補足

Lism に最初から入っているのは、下の表にあるクラスだけです。ほかに要るものは、同じ名前の形で自分で CSS を書いて足します。

1つの性質を変える（-hov:-{prop}）#

クラス 変わるもの 変数を入れないときの値
-hov:-c 文字の色（color） var(--link)（リンクの色）
-hov:-bgc 背景の色（background-color） color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 20%)
-hov:-bdc 線の色（border-color） currentColor（文字と同じ色）
-hov:-o 不透明度（opacity） var(--o--p)
-hov:-bxsh 影（box-shadow） var(--bxsh--50)
-hov:-transform 形や位置（transform） translate(0, -4px)（上へ 4px）

-hov:-bgc の初期値は、今の背景色に灰色を 20% 混ぜた色です。明るい背景でも暗い背景でも、少しだけ色が変わります。

変数を入れずに使う#

どのクラスにも初期値があるので、クラスを付けるだけで動きます。下のボタンにマウスを乗せてみてください。

表示例

ボタン ボタン ボタン
html
<div class="l--cluster -g:10">
  <a class="-hov:-bgc -c:text -bd -bdc:current -px:20 -py:10 -hl:s -td:none -bdrs:99" href="#">ボタン</a>
  <a class="-hov:-bgc -bgc:text -c:base -px:20 -py:10 -hl:s -td:none -bdrs:99" href="#">ボタン</a>
  <a class="-hov:-bgc -bgc:base-2 -c:text -bd -px:20 -py:10 -hl:s -td:none -bdrs:99" href="#">ボタン</a>
</div>
ヒント

ボタン全体を -hov:-o で薄くすると、文字まで読みにくくなることがあります。ボタンには -hov:-bgc のほうがおすすめです。

-hov:-bxsh と -hov:-transform を組み合わせると、マウスを乗せたときに影が付き、上へ 4px 動きます。has--transition（なめらかに変化させる） を足すと、変化がなめらかになります。

表示例

カード
html
<a href="#" class="is--boxLink has--transition -hov:-bxsh -hov:-transform -bd -p:20">
  <p>カード</p>
</a>

文字の色と線の色を一緒に変えることもできます。

表示例

カード
html
<a href="#" class="is--boxLink -hov:-c -hov:-bdc -bd -p:20">
  <p>カード</p>
</a>

好きな値に変える#

--hov-{prop} 変数に値を入れると、マウスを乗せたときにその値になります。

表示例

背景がブランドの色、文字が白に変わります。
html
<a class="is--boxLink -hov:-bgc -hov:-c -bgc:base-2 -p:20" style="--hov-bgc: var(--brand); --hov-c: var(--white)" href="#">
  <p>背景がブランドの色、文字が白に変わります。</p>
</a>

動く量や影の大きさも変えられます。次の例は、上へ 3px 動き、影が var(--bxsh--40) になります。

表示例

カード
html
<a href="#" class="is--boxLink has--transition -hov:-transform -hov:-bxsh -bxsh:10 -bd -p:20" style="--hov-transform: translateY(-3px); --hov-bxsh: var(--bxsh--40)">
  <p>カード</p>
</a>

自分でプリセットを作る#

同じ組み合わせをあちこちで使うなら、-hov:{preset} の形の名前で自分のクラスを作れます。次の -hov:shadowUp は Lism に入っていないので、CSS を自分で足します。

scss
@media (any-hover: hover) {
  .-hov\:shadowUp:hover {
    transform: translateY(-3px);
    box-shadow: var(--bxsh--40);
  }
}
html
<a href="#" class="is--boxLink has--transition -hov:shadowUp -bxsh:10 -bd -p:20">
  <p>カード</p>
</a>

プリセットをかける（-hov:{preset}）#

Lism に最初から入っているプリセットは1つです。

クラス すること
-hov:underline 文字に下線を出す

表示例

マウスを乗せると下線が出るリンク
html
<a class="set--plain -hov:underline" href="#">マウスを乗せると下線が出るリンク</a>

親に乗せたら子を変える（-hov:in:{preset}）#

親に set--hov を付けると、親にマウスが乗っているかどうかで、--_isHov と --_notHov という変数が切り替わります。子に付けた -hov:in:{preset} は、この変数を見て見た目を変えます。

クラス すること
-hov:in:hide 親にマウスが乗ったら、消える（透明になる）
-hov:in:show 親にマウスが乗ったら、現れる
-hov:in:zoom 親にマウスが乗ったら、1.1 倍に大きくなる

表示例

もっと見る
html
<a class="l--frame set--hov is--boxLink -ar:16/9 -bdrs:40" href="#">
  <img class="is--layer has--transition -hov:in:zoom" src="/img/sample-landscape.svg" width="960" height="540" alt="" />
  <div class="is--layer has--transition -hov:in:show -bgc -bdrs:40" style="--bgc: color-mix(in srgb, var(--black) 50%, transparent)">
    <div class="l--center -h:100% -c" style="--c: var(--white)">
      <span class="-fz:xl -px:20 -py:10">もっと見る</span>
    </div>
  </div>
</a>

-hov:in:* のクラスは、変化させる性質を --transitionProps に入れてあります。そのため has--transition と一緒に使うと、その性質だけがなめらかに変わります。

変化をなめらかにする#

has--transition（なめらかに変化させる） を付けると、マウスを乗せたときの変化に時間がかかり、なめらかになります。かかる時間は --duration 変数で変えられます。

何も指定しないとき、なめらかに変わるのは決まった性質だけです（色、影、透明度、transform と filter の仲間）。公式ドキュメントでは、変化させる性質を --transitionProps 変数ではっきり書くことがすすめられています。

表示例

0.5 秒かけて、線が赤に変わります。
html
<a class="is--boxLink has--transition -bd -bgc:base-2 -p:20 -hov:-bdc" style="--hov-bdc: var(--red); --duration: 0.5s; --bdw: 3px" href="#">
  <p>0.5 秒かけて、線が赤に変わります。</p>
</a>

React・Astro で書く場合#

<Lism> コンポーネント（とそれを元にしたコンポーネント）では、hov に文字列かオブジェクトを渡します。

文字列は、そのまま -hov:{文字列} のクラスになります。カンマで区切ると、いくつも付けられます。

jsx
<Lism hov="-o">...</Lism>
// → <div class="-hov:-o">...</div>

<Lism hov="-c,-bxsh">...</Lism>
// → <div class="-hov:-c -hov:-bxsh">...</div>

プリセットの名前も、文字列でそのまま渡せます。-hov:in:{preset} も同じで、hov="in:zoom" と書きます。

jsx
<Lism hov="shadowUp">...</Lism>
// → <div class="-hov:shadowUp">...</div>

<Media isLayer hasTransition hov="in:zoom" src="..." alt="" />

オブジェクトは、-hov:-{prop} に好きな値を入れたいときに使います。値に true を入れると、-hov:{名前} のクラスだけが付きます（プリセットと一緒に使うとき）。

jsx
<Lism hov={{ c: 'red' }}>...</Lism>
// → <div class="-hov:-c" style="--hov-c: var(--red)">...</div>

<Lism hov={{ c: 'red', shadowUp: true }}>...</Lism>
// → <div class="-hov:-c -hov:shadowUp" style="--hov-c: var(--red)">...</div>

いくつかの性質に好きな値を入れるときは、キーを並べます。has--transition は hasTransition で付けられ、文字列を渡すと変化させる性質（--transitionProps）を決められます。

jsx
<BoxLink href="#" hov={{ bgc: 'brand', c: 'white' }} bgc="base-2" p="20">...</BoxLink>

<BoxLink href="#" hasTransition="color, opacity" hov="-c,-o">...</BoxLink>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧