negative-hover v1.2.4
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