Negative Hover

Hover effect but in reverse (spotlight hover) 🔦

Apply classes to all targeted elements that are currently not on hover within a parent element.

Using with a Package Manager

yarn add -D negative-hover

npm install -D negative-hover

import NegativeHover from 'negative-hover'

new NegativeHover('#parentElement', { target: '...', css: '...' })

CDN

For this package to work with a CDN you have to call the NegativeHover class on the window object.

<script
  defer
  src="https://unpkg.com/negative-hover@latest/dist/index.js"
></script>

<script>
  document.addEventListener(
    'DOMContentLoaded',
    () => new window['NegativeHover']('#parentElement', {})
  )
</script>

🚀 You can still use the target and classes options when using the CDN.

Options

There are three options that you can pass to new NegativeHover({}), but they are both required.

new NegativeHover('#parentElement', { target: '...', css: '...' })

Wrapping

This is the wrapping HTML element identifier that is used to group the target elements.

For example, the <ul id="list"> could be used as the wrapping element for the <li> elements.

<ul id="list">
  <li>Hello</li>
  <li>Friend</li>
  <li>How</li>
  <li>Are</li>
  <li>You?</li>
</ul>

Uses document.querySelector(...).

Target

This is the HTML elements identifier that you want to target.

Uses document.querySelectorAll(...).

CSS

Pass a string of CSS class names that will be applied to the elements that are not on hover.

Stats