hover
hover時の挙動をコントロールするためのCSS設計について紹介します。
Lismでは、-hov:という文字列で始まるクラスを活用してhover時の挙動をコントロールします。
以下のCSSによって、--hov-trspでリストアップされた主要なプロパティ群が、--hov-trsduで定義される秒数でトランジションされるような設定になっています。
:root{ --hov-trsdu: 0.3s; --hov-trsp: filter, opacity, visibility, box-shadow, translate, scale, border, color, background;}[class*='-hov:'] { transition: var(--hov-trsp, all); transition-duration: var(--hov-trsdu, 0.3s);}基本的なユーティリティクラスの設計
.-hov:utilityName の形式でクラスを準備します。
例えば、Lism パッケージ内では次のようなクラスを準備しています。
.-hov\:fade:hover { opacity: 0.6;}.-hov\:shadow:hover { box-shadow: var(--sh--4);}.-hov\:up:hover { translate: 0 -3px;}必要に合わせて、同じ形式でクラスを追加してください。
Usage
JSX形式で扱えるLismコンポーネントでは、hovプロパティ文字列を指定すると、自動的にクラスを出力します。
,で区切りで複数のユーティリティクラスを同時出力することもできますので、ご活用ください。
.-hov:fade<a href="###" class="is--linkBox -hov:fade -bgc:base-2 -bd: -bdc:divider -p:30"> <p>LinkBox</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a>.-hov:shadow & -hov:up<a href="###" class="is--linkBox -hov:shadow -hov:up -bd: -p:30"> <p>LinkBox</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a>特定のプロパティを任意の値へ変化させる
Lismでは、.-hov:{prop}:形式のクラスで--hov-{prop}という変数を受け取るようにし、任意の値へ変化させる仕組みを用意しています。
c,bgc,bdc,bxsh,op,filter に対応したクラスを標準で用意しています。
.-hov\:c\::hover { color: var(--hov-c) !important;}.-hov\:bdc\::hover { border-color: var(--hov-bdc) !important;}.-hov\:op\::hover { opacity: var(--hov-op) !important;}.-hov\:bgc\::hover { background-color: var(--hov-bgc) !important;}.-hov\:bxsh\::hover { box-shadow: var(--hov-bxsh);}.-hov\:filter\::hover { filter: var(--hov-filter) !important;}必要に合わせて、同じ形式でクラスを追加してください。
Usage
JSX形式で扱えるLismコンポーネントでは、hov={{prop:value}}のようなオブジェクトを渡すと、-hov:prop:と--hov-prop:valueのセットが出力されますので、ご活用ください。
bgc,cを変化させる例 <LinkBox href='###' hov={{ bgc:'main', c:'white'}} bgc='base-2' p='30'> <p>LinkBox.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </LinkBox> <LinkBox href='###' bxsh='3' hov={{ bxsh:'1'}} bd p='30'> <p>LinkBox</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </LinkBox><LinkBox href='###' op='low' hov={{ op:'1' }} p='30' bd> <p>LinkBox</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></LinkBox><LinkBox href='###' hov={{ filter:'blur(3px)' }} p='30' bd> <p>LinkBox</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></LinkBox>配列での指定
Lismコンポーネントにて、ユーティリティクラスの出力とオブジェクト形式での細かな変化を両方指定する場合は、配列で文字列とオブジェクトを指定してください。
'up' に加え、オブジェクトで c を指定する例 <LinkBox href='###' hov={['up', { c:'red' }]} bd p='30'> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </LinkBox>子孫要素へにホバー効果を適用する
-hov:passというクラスを親に指定し、子孫要素で -hov:get:xxx という形式のクラス名を用いるようにします。
-hov:passでは、--isHover変数が 0→1へ変化するようにしているので、calc処理ができるものは記述が楽になります。
.-hov\:pass { --isHover: 0; &:hover { --isHover: 1; }}
.-hov\:get\:show { opacity: var(--isHover); visibility: hidden;
.-hov\:pass:hover & { visibility: visible; }}.-hov\:get\:hide { opacity: calc(1 - 1 * var(--isHover));}Usage
get:show, get:hide を使う
<LinkBox layout={Frame} hov='pass' href='#banner-link' ar='16/9' bdrs='4'> <Media isLayer src='/img/img-1.jpg' alt='' width='960' height='640' loading='lazy' /> <Text tag='span' hov='get:hide' pos='a' r='0' bgc='text' c='base' px='20' lh='base' m='20' bdrs='99'>Some Text</Text> <Layer hov='get:show' bgc='rgb(0 0 0 / 40%)' blur='6px'/> <Center hov='get:show' pos='a' i='0'> <Text tag='span' c='white' fz='2xl' fs='i' fw='light' lts='l' bdrs='99' px='30' py='10'>View More</Text> </Center></LinkBox>カスタムクラスを自作する
-hov:get:highlight を自作する.-hov\:get\:highlight { .-hov\:pass:hover & { color: var(--red); background-color: rgba(255, 10, 10, 0.05); }}