-hov

This page covers how Lism handles hover behavior with CSS.

In Lism, hover styles are defined using Property Classes that begin with -hov:.
There are three forms of -hov classes:

Form	Role
`-hov:-{prop}`	Reads the `--hov-{prop}` variable and changes that property on hover
`-hov:{preset}`	Applies a preset bundle of hover styles in one go
`-hov:in:{preset}`	Changes child styles in response to a parent’s `set--hov` hover state

You can also combine -hov classes with the has--transition class to apply transitions.

The Lism core package provides several built-in classes for each form. Add your own classes in the same format as needed.

@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(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 20%)))
      #{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\:-transform:hover {
    transform: var(--hov-transform, translate(0, -4px)) #{mixin.$maybe_important};
  }

  /* ----------------------------------------
   * .-hov:{preset}
   * ---------------------------------------- */
  // underlineをつけるシンプルなエフェクト
  .-hov\:underline:hover {
    text-decoration: underline #{mixin.$maybe_important};
  }
}

// ----------------------------------------
// .-hov\:in （set--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) #{mixin.$maybe_important};
}

`-hov:-{prop}`

-hov:-{prop} changes the specified property on hover to the value of the --hov-{prop} variable. The Lism core package provides the following classes by default:

Class	Target property	Default value
`-hov:-c`	`color`	`var(--link)`
`-hov:-bgc`	`background-color`	`color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 20%)`
`-hov:-bdc`	`border-color`	`currentColor`
`-hov:-o`	`opacity`	`var(--o--p)`
`-hov:-bxsh`	`box-shadow`	`var(--bxsh--50)`
`-hov:-transform`	`transform`	`translate(0, -4px)`

Using default values

Each -hov:-{prop} class has a default value, so you can use it without setting a destination CSS variable.

`-hov:-bgc`

↓

The default -hov:-bgc value works across different background colors

Button Button Button Button

<div class="l--cluster -g:10">
<a class="-hov:-bgc -c:text -bd -bdc:current -px:20 -py:10 -hl:s -td:none -bdrs:99" href="###">
  Button
</a>
<a class="-hov:-bgc -bgc:text -c:base -px:20 -py:10 -hl:s -td:none -bdrs:99" href="###">
  Button
</a>
<a class="-hov:-bgc -bgc:base-2 -c:text -bd -px:20 -py:10 -hl:s -td:none -bdrs:99" href="###">
  Button
</a>
<a class="-hov:-bgc -bgc -c -px:20 -py:10 -hl:s -td:none -bdrs:99" style="--bgc:var(--blue);--c:var(--white)" href="###">
  Button
</a>
</div>

<Cluster g="10">
  <Link href="###" hov="-bgc" c="text" bd bdc="current" px="20" py="10" hl="s" td="none" bdrs="99">
    Button
  </Link>
  <Link href="###" hov="-bgc" bgc="text" c="base" px="20" py="10" hl="s" td="none" bdrs="99">
    Button
  </Link>
  <Link href="###" hov="-bgc" bgc="base-2" c="text" bd px="20" py="10" hl="s" td="none" bdrs="99">
    Button
  </Link>
  <Link href="###" hov="-bgc" bgc="blue" c="white" px="20" py="10" hl="s" td="none" bdrs="99">
    Button
  </Link>
</Cluster>

`-hov:-o`

For buttons and button-like links, lowering the whole element’s opacity makes the text harder to read. Prefer -hov:-bgc over -hov:-o to affect only the background.

↓

Using -hov:-o

Button Button

<div class="l--cluster -g:10">
  <a class="-hov:-o -c:text -bd -bdc:current -px:20 -py:10 -hl:s -td:none -bdrs:99" href="###">
    Button
  </a>
  <a class="-hov:-o -bgc:text -c:base -px:20 -py:10 -hl:s -td:none -bdrs:99" href="###">
    Button
  </a>
</div>

<Cluster g="10">
  <Link href="###" hov="-o" c="text" bd bdc="current" px="20" py="10" hl="s" td="none" bdrs="99">
    Button
  </Link>
  <Link href="###" hov="-o" bgc="text" c="base" px="20" py="10" hl="s" td="none" bdrs="99">
    Button
  </Link>
</Cluster>

`-hov:-c`, `-hov:-bdc`

↓

Changing text and border colors

BoxLink

<a href="###" class="is--boxLink -hov:-c -hov:-bdc -bd -p:20">
  <p>BoxLink</p>
</a>

<BoxLink href="###" hov="-c,-bdc" bd p="20">
  <p>BoxLink</p>
</BoxLink>

`-hov:-bxsh`, `-hov:-transform`

Combining -hov:-bxsh and -hov:-transform adds a shadow and moves the element up by 4px on hover. Add has--transition to make the changes smooth.

↓

Combining movement and shadow

BoxLink

<a href="###" class="is--boxLink has--transition -hov:-bxsh -hov:-transform -bd -p:20">
  <p>BoxLink</p>
</a>

<BoxLink href="###" hasTransition hov="-bxsh,-transform" bd p="20">
  <p>BoxLink</p>
</BoxLink>

In the <Lism> component, passing a string such as "-bgc" to the hov prop automatically outputs the corresponding -hov:-bgc class.

Specifying custom values

Specify a value with the --hov-{prop} variable to make the property transition to that value on hover.

↓

Example of changing bgc and c

BoxLink.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<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>

<BoxLink href="###" hov={{ bgc: 'brand', c: 'white' }} bgc="base-2" p="20">
  <p>BoxLink.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</BoxLink>

You can also customize the movement and shadow. The following example moves the element up by 3px and sets the hover shadow to var(--bxsh--40).

↓

Specifying movement and shadow values

BoxLink

<a href="###" class="is--boxLink has--transition -hov:-transform -hov:-bxsh -bxsh:10 -bd -p:20" style="--hov-transform: translateY(-3px); --hov-bxsh: var(--bxsh--40)">
  <p>BoxLink</p>
</a>

<BoxLink href="###" hasTransition hov={{ transform: 'translateY(-3px)', bxsh: '40' }} bxsh="10" bd p="20">
  <p>BoxLink</p>
</BoxLink>

Combining styles into a custom class

To reuse the same effect in multiple places, you can combine the styles from the previous example into a custom class called -hov:shadowUp. Give it a name in the -hov:{preset} format and define the hover styles in CSS.

↓

Combining movement and shadow into -hov:shadowUp

BoxLink

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

<a href="###" class="is--boxLink has--transition -hov:shadowUp -bxsh:10 -bd -p:20">
  <p>BoxLink</p>
</a>

<BoxLink href="###" hasTransition hov="shadowUp" bxsh="10" bd p="20">
  <p>BoxLink</p>
</BoxLink>

Specifying `hov` on the `<Lism>` component

On the <Lism> component (and components that extend it), you can pass either a string or an object to the hov prop to flexibly output -hov classes and --hov-{prop} CSS variables.

When passing a string

The string you pass is output as-is as a -hov:{string} class. You can also pass multiple classes separated by commas.

<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>

When passing an object

Mainly used to assign a custom value to a -hov:-{prop} class.

Writing hov={{ prop: value }} adds a -hov:-{prop} class and sets value to the --hov-{prop} CSS variable.

<Lism hov={{ c: 'red' }}>...</Lism>
// → <div class="-hov:-c" style="--hov-c: var(--red)">...</div>

If the value is true, a -hov:{key} class is emitted. Use this to output both a value-bearing prop and a preset class (-hov:{preset} or a custom class) at the same time.

<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} applies a named preset bundle of hover styles in one go. The Lism core package provides the following preset by default:

Class	Description
`-hov:underline`	Shows an underline on the text

↓

Using -hov:underline

Link text

<a class="set--plain -hov:underline" href="###">
  Link text
</a>

<Link href="###" hov="underline" set="plain" >
  Link text
</Link>

`-hov:in:{preset}`

-hov:in:{preset} is used to trigger style changes on child elements from a parent’s hover state.

When the set--hov class is applied to a parent element, the --_isHov and --_notHov variables switch based on its hover state. -hov:in:{preset} reads these variables to change the child’s styles accordingly.

The Lism core package provides the following classes by default:

/* Hide when parent set--hov is hovered */
.-hov\:in\:hide {
  --transitionProps: opacity;
  opacity: var(--_isHov, 0);
}

/* Show when parent set--hov is hovered */
.-hov\:in\:show {
  --transitionProps: opacity, visibility;
  opacity: var(--_notHov, 0);
  visibility: var(--_notHov, hidden);
}

/* Zoom in when parent set--hov is hovered */
.-hov\:in\:zoom {
  --transitionProps: scale;
  scale: var(--_isHov, 1.1);
}

↓

Example using -hov:in:show and -hov:in:zoom

<a class="l--frame set--hov is--boxLink -ar:16/9 -bdrs:40" href="#banner-link">
  <img class="is--layer has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" width="960" height="640" loading="lazy" />
  <div class="is--layer has--transition -hov:in:show -bgc -bdrs:40" 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>

<Frame as="a" isBoxLink set="hov" href="#banner-link" ar="16/9" bdrs="40">
  <Media isLayer hasTransition hov="in:zoom" src="https://cdn.lism-css.com/img/KRQPW50jXaLu.webp" alt="" width="960" height="640" loading="lazy" />
  <Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 40%)" style={{ backdropFilter: 'blur(6px)' }} bdrs="40">
    <Center h="100%" c="#fff">
      <Inline fz="2xl" fs="italic" fw="light" lts="l" bdrs="99" px="20" py="10">
        View More
      </Inline>
    </Center>
  </Layer>
</Frame>

Configuring transitions

Adding the has--transition class makes hover changes transition smoothly. Use the --duration variable to adjust the transition time.

By default, only colors, shadows, opacity, transform-related, and filter-related properties are transitioned. We recommend explicitly listing the properties that actually change via the --transitionProps variable (or a string such as hasTransition="color, opacity" in Lism components).

↓

Example: combining has--transition to animate the bxsh intensity

BoxLink

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<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>

<BoxLink href="###" hasTransition bxsh="10" hov={{ bxsh: '40' }} bd p="20">
  <p>BoxLink</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</BoxLink>

↓

Example: slowly transitioning the border-color

BoxLink

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<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>

<BoxLink href="###" hasTransition hov={{ bdc: 'red' }} bd bdw="3px" bgc="base-2" p="20" style={{ '--duration': '.5s' }}>
  <p>BoxLink</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</BoxLink>

-hov

-hov:-{prop}

Using default values

-hov:-bgc

-hov:-o

-hov:-c, -hov:-bdc

-hov:-bxsh, -hov:-transform

Specifying custom values

Combining styles into a custom class

Specifying hov on the <Lism> component

When passing a string

When passing an object

-hov:{preset}

-hov:in:{preset}

Configuring transitions

`-hov:-{prop}`

`-hov:-bgc`

`-hov:-o`

`-hov:-c`, `-hov:-bdc`

`-hov:-bxsh`, `-hov:-transform`

Specifying `hov` on the `<Lism>` component

`-hov:{preset}`

`-hov:in:{preset}`