Lism CSS
Search

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

FormRole
-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--var: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(--base-2)) #{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:{preset}
   * ---------------------------------------- */
  // underlineをつけるシンプルなエフェクト
  .-hov\:underline:hover {
    text-decoration: underline;
  }
  // 背景色が暗くも明るくても使えるように、ニュートラルグレーを配色。
  //    Memo: 黒からの変化の方がわかりづらいため、グレーの中でも少し明るめを混ぜる。
  .-hov\:neutral:hover {
    background-color: color-mix(in srgb, var(--bgc, var(--base)), hsl(220, 5%, 75%) 25%) #{mixin.$maybe_important};
  }
}

// ----------------------------------------
// .-hov\:in （set--var: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);
}

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

ClassTarget propertyDefault value
-hov:-ccolorvar(--link)
-hov:-bdcborder-colorcurrentColor
-hov:-bgcbackground-colorvar(--base-2)
-hov:-oopacityvar(--o--p)
-hov:-bxshbox-shadowvar(--bxsh--50)

Each class ships with a default value, so you can use them by simply adding the class — no extra configuration needed.

↓
Usage examples of -hov:-o, -hov:-c, -hov:-bxsh

BoxLink

Lorem ipsum dolor sit amet consectetur adipisicing elit.

BoxLink

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

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

Changing a property to an arbitrary value

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>

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. This is useful when you want 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>

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

ClassDescription
-hov:underlineShows an underline on the text
-hov:neutralBlends a neutral gray into the background color, slightly brightening it on hover

You can freely add your own presets to fit each project.

Creating a custom -hov class

↓
Adding -hov:shadowUp

BoxLink

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

Using -hov:in:{preset}

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

When the set--var: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--var:hov is hovered */
.-hov\:in\:hide {
  --transitionProps: opacity;
  opacity: var(--_isHov, 0);
}


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


/* Zoom in when parent set--var:hov is hovered */
.-hov\:in\:zoom {
  --transitionProps: scale;
  scale: var(--_isHov, 1.1);
}
↓
Example using -hov:in:show and -hov:in:zoom
View More
<a class="l--frame set--var:hov is--boxLink -ar:16/9 -bdrs:30" href="#banner-link">
  <img class="is--layer has--transition -hov:in:zoom" src="https://cdn.lism-css.com/img/a-1.jpg" width="960" height="640" loading="lazy" />
  <div class="is--layer has--transition -hov:in: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>

How to configure transitions

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

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

© Lism CSS. All rights reserved.

TOC