<div class="hover">
Default settings
</div>
<div class="hover" data-distance="100" data-delay="1000">
Distance: 100px, Delay: 1000ms
</div>
<div class="hover" data-distance="1" data-delay="100">
Distance: 1px, Delay: 100ms
</div>
<div class="hover" data-leave="1000">
Leave: 1000ms
</div>
$('.hover').on({
'hoverinit' : function(ev, hover) {
var delay = $(this).data('delay'),
distance = $(this).data('distance'),
leave = $(this).data('leave');
if(delay) {
hover.delay(delay);
}
if(distance) {
hover.distance(distance);
}
if(leave) {
hover.leave(leave);
}
},
'hoverenter' : function(ev) {
$(this).addClass('highlight');
},
'hoverleave' : function(ev) {
$(this).removeClass('highlight');
}
});
body{
font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}
div {
padding: 5px;
margin: 10px;
}
.hover {
border: 1px solid gray;
}
.highlight {
background-color: yellow;
}