https://github.com/lavoiesl/jquery-hoverable

jQuery plugin that adds and removes a class to toggle hovered state
https://github.com/lavoiesl/jquery-hoverable

Last synced: 2 months ago
JSON representation

jQuery plugin that adds and removes a class to toggle hovered state

• Host: GitHub
• URL: https://github.com/lavoiesl/jquery-hoverable
• Owner: lavoiesl
• Created: 2012-02-16T21:44:28.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2012-03-07T15:39:05.000Z (almost 13 years ago)
• Last Synced: 2023-03-13T16:11:54.916Z (almost 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 99.6 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jQuery Hoverable

## Author

Sébastien Lavoie ([email protected])

## 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 

```html

  


    
Title

    


        
Test

        
Test

        
Test

        
Test

    

  

```


## Initialization 

```javascript

$(function() {

    $('.hoverable').hoverable();

});

```

### Options

```javascript

{

    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

```css

.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

```javascript

$('.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](http://lavoiesl.github.com/Jquery-AutoCollapser/demo.html)