-hov
hover時の挙動をコントロールするためのCSS設計について紹介します。
Lismでは、hover時のスタイルは-hov:で始まるPropertyクラスで定義します。
-hovクラスには以下の3つの形式があります。
| 形式 | 役割 |
|---|---|
-hov:-{prop} | --hov-{prop}変数を受け取り、hover時に該当プロパティを変化させる |
-hov:{preset} | hover時のスタイルセットをプリセット名でまとめて適用する |
-hov:in:{preset} | 親要素の set--var:hov を起点に、子要素のスタイルを変化させる |
また、has--transitionクラスを併用することで、変化にトランジションを設定できます。
Lismのコアパッケージでは、それぞれの形式についていくつかのクラスを標準で用意しています。必要に合わせてこの形式でクラスを追加してください。
@use '../_mixin' as mixin;
@media (any-hover: hover) {
/* ----------------------------------------
* .-hov:-{prop}
* ---------------------------------------- */
.-hov\:-c:hover {
color: var(--hov-c, var(--link)) #{mixin.$maybe_important};
}
.-hov\:-bdc:hover {
border-color: var(--hov-bdc, currentColor) #{mixin.$maybe_important};
}
.-hov\:-bgc:hover {
background-color: var(--hov-bgc, var(--base-2)) #{mixin.$maybe_important};
}
.-hov\:-o:hover {
opacity: var(--hov-o, var(--o--p)) #{mixin.$maybe_important};
}
.-hov\:-bxsh:hover {
box-shadow: var(--hov-bxsh, var(--bxsh--50)) #{mixin.$maybe_important};
}
/* ----------------------------------------
* .-hov:{preset}
* ---------------------------------------- */
// underlineをつけるシンプルなエフェクト
.-hov\:underline:hover {
text-decoration: underline;
}
// 背景色が暗くも明るくても使えるように、ニュートラルグレーを配色。
// Memo: 黒からの変化の方がわかりづらいため、グレーの中でも少し明るめを混ぜる。
.-hov\:neutral:hover {
background-color: color-mix(in srgb, var(--bgc, var(--base)), hsl(220, 5%, 75%) 25%) #{mixin.$maybe_important};
}
}
// ----------------------------------------
// .-hov\:in （set--var:hov 連動の consumer class）
// ----------------------------------------
.-hov\:in\:hide {
--transitionProps: opacity;
opacity: var(--_isHov, 0) #{mixin.$maybe_important};
}
.-hov\:in\:show {
--transitionProps: opacity, visibility;
opacity: var(--_notHov, 0) #{mixin.$maybe_important};
visibility: var(--_notHov, hidden) #{mixin.$maybe_important};
}
.-hov\:in\:zoom {
--transitionProps: scale;
scale: var(--_isHov, 1.1);
}-hov:-{prop} の使い方
-hov:-{prop}は、hover時に指定したプロパティを--hov-{prop}変数の値に変化させるためのクラスです。
Lismのコアパッケージでは、以下のクラスを標準で用意しています。
| クラス | 変化するプロパティ | 初期値 |
|---|---|---|
-hov:-c | color | var(--link) |
-hov:-bdc | border-color | currentColor |
-hov:-bgc | background-color | var(--base-2) |
-hov:-o | opacity | var(--o--p) |
-hov:-bxsh | box-shadow | var(--bxsh--50) |
それぞれ初期値が定義されているため、クラスを付与するだけでも使用可能です。
-hov:-o,-hov:-c,-hov:-bxshの使用例<a href="###" class="is--boxLink -hov:-o -bgc:base-2 -bd -p:20"> <p>BoxLink</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a><a href="###" class="is--boxLink -hov:-c -hov:-bxsh -bd -p:20"> <p>BoxLink</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a><Lism>コンポーネントでは、hovプロパティに"-o"のような文字列を指定すると、自動的に対応する-hov:-oクラスが出力されます。
任意の値へ変化させる例
--hov-{prop}変数で値を指定すると、hover時にその値へ変化するようになります。
bgc,cを変化させる例<a class="is--boxLink -hov:-bgc -hov:-c -bgc:base-2 -p:20" style="--hov-bgc: var(--brand); --hov-c: var(--white)" href="###"> <p>BoxLink.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a><Lism>コンポーネントでの hov の指定方法
<Lism>コンポーネント（およびそれを継承するコンポーネント）では、hovプロパティに文字列またはオブジェクトを渡すことで、-hovクラスおよび--hov-{prop}変数を柔軟に出力できます。
文字列で指定する場合
入力した文字列がそのまま-hov:{入力文字列}クラスとして出力されます。カンマ区切りで複数指定も可能です。
<Lism hov="-o">...</Lism>// → <div class="-hov:-o">...</div>
<Lism hov="shadowUp">...</Lism>// → <div class="-hov:shadowUp">...</div>
<Lism hov="-c,-bxsh">...</Lism>// → <div class="-hov:-c -hov:-bxsh">...</div>オブジェクトで指定する場合
主に-hov:-{prop}に対して任意の値を指定するために使います。
hov={{ prop: value }}のように書くと、-hov:-{prop}クラスが付与され、--hov-{prop}変数にvalueがセットされます。
<Lism hov={{ c: 'red' }}>...</Lism>// → <div class="-hov:-c" style="--hov-c: var(--red)">...</div>値にtrueを指定した場合は-hov:{key}クラスが出力されます。これは任意値を指定したいプロパティとプリセットクラス（-hov:{preset}や自作クラス）を同時に指定したい時に役立ちます。
<Lism hov={{ shadowUp: true }}>...</Lism>// → <div class="-hov:shadowUp">...</div>
<Lism hov={{ c: 'red', shadowUp: true }}>...</Lism>// → <div class="-hov:-c -hov:shadowUp" style="--hov-c: var(--red)">...</div>-hov:{preset} の使い方
-hov:{preset}は、hover時に適用したいスタイルのセットをプリセット名でまとめて適用できるクラスです。
Lismのコアパッケージでは以下のプリセットを標準で用意しています。
| クラス | 内容 |
|---|---|
-hov:underline | テキストに下線を表示する |
-hov:neutral | 背景色にニュートラルグレーをブレンドして、わずかに明るさを変化させる |
プロジェクトごとに必要なプリセットを自由に追加できます。
-hovクラスを自作する例
-hov:shadowUpを追加@media (any-hover: hover) { .-hov\:shadowUp:hover { box-shadow: var(--bxsh--40); translate: 0 -3px; }}-hov:in:{preset} の使い方
-hov:in:{preset}は、親要素のhoverをトリガーに子要素のスタイルを変化させるためのクラスです。
親要素に set--var:hov クラスを付与すると、--_isHov / --_notHov 変数がhover状態に応じて切り替わります。-hov:in:{preset}はこの変数を参照してスタイルを変化させる仕組みになっています。
Lismのコアパッケージでは、以下のクラスを標準で用意しています。
/* 親の set--var:hov がhoverされたら非表示にする */.-hov\:in\:hide { --transitionProps: opacity; opacity: var(--_isHov, 0);}
/* 親の set--var:hov がhoverされたら表示する */.-hov\:in\:show { --transitionProps: opacity, visibility; opacity: var(--_notHov, 0); visibility: var(--_notHov, hidden);}
/* 親の set--var:hov がhoverされたらズーム表示する */.-hov\:in\:zoom { --transitionProps: scale; scale: var(--_isHov, 1.1);}-hov:in:showと-hov:in:zoomを使う例
<a class="l--frame set--var:hov is--boxLink -ar:16/9 -bdrs:30" href="#banner-link"> <img class="is--layer has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" loading="lazy" /> <div class="is--layer has--transition -hov:in:show -bgc" style="--bgc: rgb(0 0 0 / 40%); backdrop-filter: blur(6px)"> <div class="l--center -h:100% -c" style="--c: #fff"> <span class="-fz:2xl -fs:italic -fw:light -lts:l -bdrs:99 -px:20 -py:10">View More</span> </div> </div></a>トランジションを設定する方法
has--transitionクラスを付与すると、hover時の変化になめらかなトランジションがかかります。--duration変数で所要時間を調整できます。
has--transitionと組み合わせてbxshの強さを変化させる例<a href="###" class="is--boxLink has--transition -bxsh:10 -hov:-bxsh -bd -p:20" style="--hov-bxsh: var(--bxsh--40)"> <p>BoxLink</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a><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>BoxLink</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a>