-hov:

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

Lismでは、-hov:で始まるクラスを活用してhover時の挙動をコントロールします。

さらに、-trs:クラスでトランジションの設定を行うことで、hover時の挙動をより細かくコントロールすることができます。

基本的な使い方

.-hov:name または .-hov:{prop}: の形式でクラスを準備します。
前者はhover時の値を事前に決めておくクラスで、後者はcss変数と組み合わせを前提にしたクラスです。

/* -hov: クラスの例 */
.-hov\:fade:hover {
  opacity: 0.7;
}
.-hov\:c\::hover {
  color: var(--hov-c) !important;
}
.-hov\:bdc\::hover {
  border-color: var(--hov-bdc) !important;
}
.-hov\:bgc\::hover {
  background-color: var(--hov-bgc) !important;
}
.-hov\:bxsh\::hover {
  box-shadow: var(--hov-bxsh);
}

（Lismのコアパッケージには標準で上記のクラスを用意していますが、必要に合わせてこの形式でクラスを追加してください。）

↓

.-hov:fadeの使用例

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

<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のセットが出力されます。

`-trs:` でトランジションを設定する方法

Lismでは、以下のような-trs:クラスを用意しています。

.-trs\: {
  transition: var(--trsdu) var(--trstf);
  transition-property: var(--trsp);
}

このクラスとcss変数を組み合わせて、トランジションの設定を行うことができます。

↓

-trs:と組み合わせてbxshの強さを変化させる例

<a
  href="###"
  class="is--linkBox -trs: -bxsh:1 -hov:bxsh: -bd: -p:30"
  style="--hov-bxsh:var(--bxsh--4)"
>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>

↓

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

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

<LinkBox
  href='###' trs hov={{ bdc:'red' }} bd bdc='transparent' bdw='3px' bgc='base-2' p='30'
  style={{'--trsdu':'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--4);
    translate: 0 -3px;
  }
}

`.-hov:set` と特殊変数

Lism では、-hov:setというクラスを定義しており、このクラスでは--_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

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

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

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

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

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

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

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

↓

get:show を使う例

<a class="l--frame is--linkBox -hov:set -ar:16/9 -bdrs:4" href="#banner-link">
  <img class="is--layer" src="/img/img-1.jpg" width="960" height="640" loading="lazy">
  <div class="is--layer -trs: -hov:get: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:i -fw:light -lts:l -bdrs:99 -px:30 -py:10">View More</span>
    </div>
  </div>
</a>

<Frame isLinkBox hov='set' href='#banner-link' ar='16/9' bdrs='4'>
  <Media isLayer src='/img/img-1.jpg' alt='' width='960' height='640' loading='lazy' />
  <Layer trs hov='get:show' bgc='rgb(0 0 0 / 40%)' blur='6px'>
    <Center h='100%' c='#fff'>
      <Text tag='span' fz='2xl' fs='i' fw='light' lts='l' bdrs='99' px='30' py='10'>View More</Text>
    </Center>
  </Layer>
</Frame>

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

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

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

↓

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

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

<a
  href="#banner-link"
  class="is--linkBox -hov:set -ar:16/9 -ov:h -bdrs:4"
  style="--trsdu--default:.6s"
>
  <div class="l--frame is--layer">
    <img class="is--layer -trs: -hov:get:zoom" src="/img/img-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:get:letterSpread -fz:2xl">LinkBox</span>
  </div>
</a>

<LinkBox
  href='#banner-link'
  hov='set' ov='h' ar='16/9' bdrs='4'
  style={{'--trsdu--default':'.6s'}}
>
  <Frame isLayer>
    <Media trs hov='get:zoom' src='/img/img-2.jpg' alt='' width='960' height='640' loading='lazy'/>
  </Frame>
  <Layer trs hov='get:hide' grayscale='70%'/>
  <Center isLayer c='#fff' bgc='rgb(0 0 0 / 40%)'>
    <Text trs hov='get:letterSpread' fz='2xl'>LinkBox</Text>
  </Center>
</LinkBox>

-hov:

基本的な使い方

-trs: でトランジションを設定する方法

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

.-hov:set と特殊変数