Kinsey

# Parent Class Hover

This feature adds a class on the parent element when its children elements are hovered. It can be useful for better CSS hover experience.

# Markup

<div data-arts-hover-class="hover-zoom-underline">
  <a data-arts-hover="trigger" href="#">Hover me.</a>
  <a data-arts-hover="trigger" href="#">Hover me too.</a>
  <div data-arts-hover="trigger">Any child element can act as a trigger.</div>
</div>

# Hover Result

Note .hover-zoom-underline class temporarily added to the parent element when a child trigger is hovered.

<div class="hover-zoom-underline" data-arts-hover-class="hover-zoom-underline">
  <!-- <a> was hovered -->
  <a data-arts-hover="trigger" href="#">Hover me.</a>
  <a data-arts-hover="trigger" href="#">Hover me too.</a>
  <div data-arts-hover="trigger">Any child element can act as a trigger.</div>
</div>

# Elements

  • data-arts-hover-class=[ class_name ] – a temp. hover class WITHOUT dot "."
  • data-arts-hover="trigger" – inner children (triggers).

# Showcase

  • 📄 All template pages.

← Parallax →