-hov
This page introduces the CSS design for controlling hover behavior in Lism.
In Lism, hover styles are defined using Property 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.
.-hov:o, .-hov:c, .-hov:bxsh<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 to the hov prop automatically outputs the corresponding -hov class.
Changing a property to an arbitrary value
bgc and c<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>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.
set--transition to animate the bxsh intensity<a href="###" class="is--boxLink set--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><a class="is--boxLink set--transition -bd -bgc:base-2 -p:20 -hov:bdc" style="--hov-bdc: var(--red); --hov-duration: 0.5s; --bdw: 3px" href="###"> <p>BoxLink</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></a>Creating a custom -hov class
.-hov:shadowUp@media (any-hover: hover) { .-hov\:shadowUp:hover { box-shadow: var(--bxsh--40); translate: 0 -3px; }}set--hov and -hov:to:xxx
Lism defines a class called set--hov, which sets up the --_isHov and --_notHov variables.
By leveraging set--hov, you can trigger style changes on child elements 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 { --transProp: opacity; opacity: var(--_isHov, 0);}
/* Show when parent set--hov is hovered */.-hov\:to\:show { --transProp: opacity, visibility; opacity: var(--_notHov, 0); visibility: var(--_notHov, hidden);}
/* Zoom in when parent set--hov is hovered */.-hov\:to\:zoom { --transProp: scale; scale: var(--_isHov, 1.1);}-hov:to:show and -hov:to:zoom
<a class="l--frame is--boxLink set--hov -ar:16/9 -bdrs:30" href="#banner-link"> <img class="is--layer set--transition -hov:to:zoom" 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 / 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>