Lism CSS
Search

-hov

This page introduces the CSS design for controlling hover behavior in Lism.

In Lism, hover styles are defined using Prop classes that begin with -hov:. The set--transition class is used alongside them to configure transitions.

Basic Usage

Hover behavior is controlled by combining a class in the format .-hov:{prop} with a CSS variable --hov-{prop}.

The Lism core package provides the following classes by default:

(Add classes in this format as needed.)

Since each built-in class defines a default value, they can be used simply by adding the class — no additional configuration required.

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

LinkBox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

LinkBox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

 
<a href="###" class="is--linkBox -hov:o -bgc:base-2 -bd -p:20">
  <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:20">
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>

In the <Lism> component, passing a string to the hov prop automatically outputs the corresponding -hov class.

Changing a property to an arbitrary value

↓
Example of changing bgc and c

LinkBox.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

 
<a
  class="is--linkBox -hov:bgc -hov:c -bgc:base-2 -p:20"
  style="--hov-bgc:var(--brand);--hov-c:var(--white)"
  href="###"
>
  <p>LinkBox.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>

In the <Lism> component, passing an object like hov={{ prop:value }} outputs a -hov:prop class paired with a --hov-prop:value CSS variable.

How to configure transitions

The set--transition class is available for this purpose.

Combine this class with CSS variables to configure transition behavior.

↓
Example: combining set--transition to animate the bxsh intensity

LinkBox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

 
<a
  href="###"
  class="is--linkBox set--transition -bxsh:10 -hov:bxsh -bd -p:20"
  style="--hov-bxsh:var(--bxsh--40)"
>
  <p>LinkBox</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>
↓
Example: slowly transitioning the border-color

LinkBox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

Creating a custom -hov class

↓
Adding .-hov:shadowUp

LinkBox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

.set--hov and Special Variables

Lism defines a class called set--hov, which sets up the --_isHov and --_notHov variables.

  • --_isHov is defined as an empty value only when the element is not hovered (and not focused within).
  • --_notHov is the opposite — it is defined as an empty value when the element is hovered or focused within.
@media (any-hover: hover) {
  .set--hov:hover {
    --_notHov: ;
  }
  .set--hov:not(:is(:hover, :focus-within)) {
    --_isHov: ;
  }
}
@media (any-hover: none) {
  .set--hov {
    --_isHov: ;
  }
}
.set--hov:is(:focus-visible, :focus-within) {
  --_notHov: ;
}

For example, writing var(--_isHov, value) means that since --_isHov is undefined on hover, value is applied. When not hovered, --_isHov is defined as empty, making it an invalid value that is ignored. (Note: if a style is already applied to the same property on the same element, it will also be invalidated.)

Here is an example:

↓
Adding .-hov:test
BOX
/* Variables are defined in .set--hov */
.-hov\:test {
  color: var(--_isHov, red) var(--_notHov, blue); /* red on hover, blue otherwise */
  background-color: var(--_notHov, lightgray); /* lightgray when not hovered, invalid on hover */
  box-shadow: var(--_isHov, var(--bxsh--30)); /* shadow on hover, invalid when not hovered */
}

In the color example above, two var() expressions are placed side by side — one is always empty while the other has a value — so only one of them applies at any given time. This technique allows you to write both hover and non-hover styles in the same declaration.

Passing hover state to child elements

This is where set--hov becomes particularly powerful. By adding set--hov to a parent element and using the --_isHov and --_notHov variables in child elements, you can control the behavior of children when the parent is hovered.

The core package includes a small set of such child-targeting classes under the -hov:to:xxx naming convention by default.

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


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


.-hov\:to\:zoom {
  --transProp: scale;
  scale: var(--_isHov, 1.1);
}
↓
Example using to:show
View More
<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:20 -py:10">View More</span>
    </div>
  </div>
</a>

Creating custom -hov:to classes

Let’s create a custom -hov:to:zoom class that zooms in when the parent is hovered, and a -hov:to:letterSpread class that spreads the letter spacing.

Additionally, we’ll override --hov-duration on the parent to change the transition duration of all child elements at once.

↓
Example: adjusting child hover actions with custom classes

LinkBox

 
.-hov\:to\:letterSpread {
  --transProp: letter-spacing;
  letter-spacing: var(--_isHov, 0.125em);
}

© Lism CSS. All rights reserved.

Contents