Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery plugin that adds and removes a class to toggle hovered state
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
composer.json
demo.html
jQuery.hoverable.js
jQuery.hoverable.min.js

README.md

jQuery Hoverable

Author

Sébastien Lavoie (github@lavoie.sl)

Description

Simple solution to a common problem in IE6 that doesn’t support :hover for other elements than anchors:

  • Adds classes hoverable-{over,out} on the wrapper
  • Fires events

Prerequisites

  • jQuery, should work with any version but tested with 1.7

Basic setup

  <div class="hoverable">
    <h4>Title</h4>
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
  </div>

Initialization

$(function() {
    $('.hoverable').hoverable();
});

Options

{
    overEvent: 'mouseenter',               // jQuery event to register on
    outEvent: 'mouseleave',                 // Idem
    overClass: 'hoverable-over',          // Class to be added when the item is hovered
    outClass: 'hoverable-out'             // Idem
}

CSS Example

.hoverable ul {
  display:none;
}
.hoverable-over ul {
  display: block;
}

Events

Two events are made and they both pass the data.show as a boolean

  • hoverable.over
  • hoverable.out
$('.hoverable').on('hoverable.over', function(event){
  console.log("Hoverable is hovered");
});
$('.hoverable').on('hoverable.out', function(event,data){
  console.log("Hoverable is not longer hovered");
});

Demo

Checkout the demo

Something went wrong with that request. Please try again.