Kinsey

# Parent Class Hover

This feature adds a class to the parent element when its child elements are hovered. It can be useful for a 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 the .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 temporary hover class WITHOUT dot "."
  • data-arts-hover="trigger" – inner children (triggers).

# Showcase

  • 📄 All template pages.

← Parallax →