-hov

hover時の挙動をコントロールするためのCSS設計について紹介します。

Lismでは、hover時のスタイルは-hov:で始まるPropクラスで定義します。
また、set-transitionクラスを併用することでトランジションの設定を行います。

基本的な使い方

.-hov:{prop} という形式のクラスと、--hov-{prop} というcss変数を組み合わせて、hover時の挙動をコントロールします。

Lismのコアパッケージでは、以下のようなクラスを標準で用意しています。

（必要に合わせてこの形式でクラスを追加してください。）

Lismに内包されているクラスでは、それぞれ初期値を定義しているため、クラスを付与するだけでも使用可能になっています。

↓

.-hov:o,.-hov:c,.-hov:bxshの使用例

<a href="###" class="is--linkBox -hov:o -bgc:base-2 -bd -p:30">
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>
<a href="###" class="is--linkBox -hov:c -hov:bxsh -bd -p:30">
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>

<LinkBox href='###' hov='o' bgc='base-2' bd p='30'>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</LinkBox>
<LinkBox href='###' hov='c,bxsh' bd p='30'>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</LinkBox>

<Lism>コンポーネントでは、hovプロパティに文字列を指定すると、自動的に-hovクラスを出力します。

プロパティを任意の値へ変化させる例

↓

bgc,cを変化させる例

<a
  class="is--linkBox -hov:bgc -hov:c -bgc:base-2 -p:30"
  style="--hov-bgc:var(--main);--hov-c:var(--white)"
  href="###"
>
  <p>LinkBox.</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--linkBox set-transition -bxsh:10 -hov:bxsh -bd -p:30"
  style="--hov-bxsh:var(--bxsh--40)"
>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>

↓

border-colorをゆっくり変化させる例

<a
  class="is--linkBox -hov:bdc set-transition -bd -bgc:base-2 -p:30"
  style="--hov-bdc:var(--red);--duration:1s;--bdw:3px" href="###"
>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>

<LinkBox
  href='###' setTransition hov={{ bdc:'red' }} bd bdw='3px' bgc='base-2' p='30'
  style={{'--duration':'1s'}}~
>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</LinkBox>

`-hov`クラスを自作する例

↓

.-hov:shadowUpを追加

@media (any-hover: hover) {
  .-hov\:shadowUp:hover {
    box-shadow: var(--bxsh--40);
    translate: 0 -3px;
  }
}

`.set-hov` と特殊変数

Lism では、set-hovというクラスを定義しており、このクラスでは--isHov_変数と--notHov_変数を定義しています。

--isHov_は非hover時にのみ空白定義されています。
--notHov_は逆に、hover時にのみ空白定義されています。

@media (any-hover: hover) {
  .-hov\:set:hover {
    --notHov_: ;
  }
  .-hov\:set:not(:hover) {
    --isHov_: ;
  }
}
@media (any-hover: none) {
  .-hov\:set {
    --isHov_: ;
  }
}

例えば var(--isHov_, value) とすると、--isHov_はhover時は未定義となるため、valueが適用されます。
非hover時は空白の定義がされているため、無効な値となり無視されます。（ただし同じ要素の同じプロパティに対してすでにスタイルを適用している場合、それも無効となることに注意が必要です。）

以下に例を示します。

↓

.-hov:testを追加

BOX

/* 変数は.set-hov で定義済み */
.-hov\:test {
  color: var(--isHov_, red) var(--notHov_, blue); /* hover時はred, 非hover時はblue*/
  background-color: var(--notHov_, lightgray); /* 非hover時はlightgray、hover時は無効な値 */
  box-shadow: var(--isHov_, var(--bxsh--30)); /* hover時はshadowあり、非hover時は無効な値 */
}

上記の例での color では、常に片方が空白でもう片方には値が適用されるようなvar()を2つ並べることでどちらが一方が適用されるというテクニックを使っています。これにより、hover時と非hover時のスタイルを同列に書くことができます。

子要素にホバー状態を渡す

さて、このset-hovが便利なのはここからです。親要素にset-hovを付与してその子要素で--isHov_変数と--notHov_変数をうまく使うことで、hover時の子要素の挙動をコントロールできるようになります。

コアパッケージには、そのような子要素向けのクラスを -hov:to:xxx として2つだけ標準で用意しています。

/* 親の set-hov がhoverされたら非表示にする */
.-hov\:to\:hide {
  opacity: var(--isHov_, 0);
}

/* 親の set-hov がhoverされたら表示する */
.-hov\:to\:show {
  opacity: var(--notHov_, 0);
  visibility: var(--notHov_, hidden);
}

↓

to:show を使う例

<a class="l--frame is--linkBox set-hov -ar:16/9 -bdrs:30" href="#banner-link">
  <img class="a--media is--layer" 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 / 10%);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:30 -py:10">View More</span>
    </div>
  </div>
</a>

<Frame isLinkBox setHov href='#banner-link' ar='16/9' bdrs='30'>
  <Media isLayer src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' loading='lazy' />
  <Layer setTransition hov='to:show' bgc='rgb(0 0 0 / 40%)' blur='6px'>
    <Center h='100%' c='#fff'>
      <HTML.span fz='2xl' fs='italic' fw='light' lts='l' bdrs='99' px='30' py='10'>View More</HTML.span>
    </Center>
  </Layer>
</Frame>

`-hov:to`クラスを自作する例

親がhoverされたらズーム表示されるような-hov:to:zoomクラスと、テキストが広がるような-hov:to:letterSpreadクラスを自作して使ってみます。

さらに、親要素で--transition-durationを上書きして子要素のトランジション時間を一括で変更してみましょう。

↓

自作クラスで子要素のホバーアクションを調整する例

.-hov\:to\:zoom {
  scale: var(--isHov_, 1.1);
}
.-hov\:to\:letterSpread {
  letter-spacing: var(--isHov_, 0.125em);
}

<a
  href="#banner-link"
  class="is--linkBox set-hov -ar:16/9 -ov:hidden -bdrs:30"
  style="--transition-duration:.6s"
>
  <div class="l--frame is--layer">
    <img class="a--media is--layer set-transition -hov:to:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" />
  </div>
  <div class="l--center is--layer -c -bgc" style="--c:#fff;--bgc:rgb(0 0 0 / 40%)">
    <span class="-hov:to:letterSpread -fz:2xl">LinkBox</span>
  </div>
</a>

<LinkBox
  href='#banner-link'
  setHov ov='hidden' ar='16/9' bdrs='30'
  style={{'--transition-duration':'.6s'}}
>
  <Frame isLayer>
    <Media setTransition hov='to:zoom' src='https://cdn.lism-css.com/img/a-2.jpg' alt='' width='960' height='640' loading='lazy'/>
  </Frame>
  <Layer setTransition hov='to:hide' grayscale='70%'/>
  <Center isLayer c='#fff' bgc='rgb(0 0 0 / 40%)'>
    <HTML.p setTransition hov='to:letterSpread' fz='2xl'>LinkBox</HTML.p>
  </Center>
</LinkBox>