Hover effect but in reverse (spotlight hover) 🔦
Apply classes to all targeted elements that are currently not on hover within a parent element.
yarn add -D negative-hover
npm install -D negative-hover
import NegativeHover from 'negative-hover'
new NegativeHover('#parentElement', { target: '...', css: '...' })
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.
There are three options that you can pass to new NegativeHover({})
, but they
are both required.
new NegativeHover('#parentElement', { target: '...', css: '...' })
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(...)
.
This is the HTML elements identifier that you want to target.
Uses document.querySelectorAll(...)
.
Pass a string of CSS class names that will be applied to the elements that are not on hover.