Sébastien Lavoie ([email protected])
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
- jQuery, should work with any version but tested with 1.7
<div class="hoverable">
<h4>Title</h4>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>$(function() {
$('.hoverable').hoverable();
});{
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
}.hoverable ul {
display:none;
}
.hoverable-over ul {
display: block;
}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");
});Checkout the demo
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent