@citizensadvice/hovers

Hover classes provide styling for elements that have the state :hover.

Usage no npm install needed!

<script type="module">
  import citizensadviceHovers from 'https://cdn.skypack.dev/@citizensadvice/hovers';
</script>

README

Hovers npm (scoped)

Hover classes provide styling for elements that have the state :hover.

Classes

Class name Value
.hover-text-${color} text color
.hover-bg-${color} background color
.hover-b-${color} border color

Examples

<p class="black hover-text-heritage-blue">
  A paragraph with text colour that changes on hover.
</p>
<div class="bg-grey hover-bg-red-primary">
  A block with a background colour that changes on hover.
</div>
<div class="ba b-black hover-b-red-primary">
  A block with a border colour that changes on hover.
</div>

Installation

$ npm install @citizensadvice/hovers

now import into your stylesheet...

@import '@citizensadvice/hovers/index.scss';

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/hovers@latest/build/hovers.css" />