-hov
hover時の挙動をコントロールするためのCSS設計について紹介します。
Lismでは、hover時のスタイルは-hov:で始まるPropertyクラスで定義します。
また、set--transitionクラスを併用することでトランジションの設定を行います。
基本的な使い方
.-hov:{prop} という形式のクラスと、--hov-{prop} というcss変数を組み合わせて、hover時の挙動をコントロールします。
Lismのコアパッケージでは、以下のようなクラスを標準で用意しています。
（必要に合わせてこの形式でクラスを追加してください。）
Lismに内包されているクラスでは、それぞれ初期値を定義しているため、クラスを付与するだけでも使用可能になっています。
↓
.-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プロパティに文字列を指定すると、自動的に-hovクラスを出力します。
プロパティを任意の値へ変化させる例
↓
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={{ prop:value }}のようなオブジェクトを渡すと、-hov:propと--hov-prop:valueのセットが出力されます。
トランジションを設定する方法
set--transitionクラスを用意しています。
このクラスとcss変数を組み合わせて、トランジションの設定を行うことができます。
↓
set--transitionと組み合わせてbxshの強さを変化させる例<a href="###" class="is--boxLink set--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> ↓
border-colorをゆっくり変化させる例
<a class="is--boxLink set--transition -bd -bgc:base-2 -p:20 -hov:bdc" style="--hov-bdc: var(--red); --hov-duration: 0.5s; --bdw: 3px" href="###"> <p>BoxLink</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a>-hovクラスを自作する例
↓
.-hov:shadowUpを追加@media (any-hover: hover) { .-hov\:shadowUp:hover { box-shadow: var(--bxsh--40); translate: 0 -3px; }}set--hov と -hov:to:xxx
Lism では、set--hovというクラスを定義しており、このクラスでは--_isHov変数と--_notHov変数を定義しています。
このset--hovを活用すると、親要素のhoverをトリガーとして子要素のスタイルを変化させることが可能になり、コアパッケージにはそのような子要素向けのクラスを -hov:to:xxx として少しだけ標準で用意しています。
/* 親の set--hov がhoverされたら非表示にする */.-hov\:to\:hide { --transProp: opacity; opacity: var(--_isHov, 0);}
/* 親の set--hov がhoverされたら表示する */.-hov\:to\:show { --transProp: opacity, visibility; opacity: var(--_notHov, 0); visibility: var(--_notHov, hidden);}
/* 親の set--hov がhoverされたらズーム表示する */.-hov\:to\:zoom { --transProp: scale; scale: var(--_isHov, 1.1);} ↓
-hov:to:showと-hov:to:zoomを使う例
View More
<a class="l--frame is--boxLink set--hov -ar:16/9 -bdrs:30" href="#banner-link"> <img class="is--layer set--transition -hov:to:zoom" src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" loading="lazy" /> <div class="is--layer set--transition -hov:to: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>