OTHER-HOVER.js

Installation (npm)

          npm install other-hover
        

Markup

Make some elements that you want to be a hover group. Use any elements and classes that you'd like.

          <div class="group-of-elements">
            <a href="/to-infinity" class="hover-me">Doe</a>
            <a href="/and-beyond" class="hover-me">Rae</a>
            <a href="/back-home" class="hover-me">Me</a>
          </div>
        

JavaScript

Import other-hover and call it! The only required config parameter is selector, which other-hover uses to determine which elements will be affected.

          import otherHover from 'other-hover'; // << import it
          // and use it!
          otherHover({
            selector: '.hover-me' // << all these elements
          })
        

CSS

Style it up! The element being hovered on will have the class .oh-hovered and the other elements in the group will have the class .oh-other.

         .hover-me {
           background: white;
         }
         .hover-me.oh-hovered {
           background: yellow;
         }
         .hover-me.oh-other {
           background: tomato;
         }
        

Example

hover over the blocks to see other-hover.js in action!

API

While selector is the only required bit of config for other-hover.js, you can also customize the classes that are applied to the elements depending on their state.

          otherHover({
            selector: '.hover-me', // affected elements,
            hoveredClass = 'custom-hover-class', // hovered class
            otherClass = 'custom-other-class', // other class
          })