doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
71 lines (61 loc) • 1.73 kB
HTML
<html lang="en">
<head>
<title>hover</title>
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.hover, .hovers, .hoverleave {
border: solid 1px green;
margin:5px;
}
.hoverstate {
background-color: yellow;
}
.myhover {
border: solid 1px red;
}
</style>
</head>
<body>
<div id='demo-html'>
<h4>Delegating</h4>
<div class='hover'>hover me</div>
<div class='hover'>hover me</div>
<h4>Bound Directly</h4>
<div class='hovers'>hover me for a second</div>
<div class='hovers'>hover me for a second</div>
<h4>HoverLeave</h4>
<div class='hoverleave'>Leave and don't return for 2 seconds</div>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
<script type="text/javascript" id="demo-source">
steal('jquerypp/event/hover', function(){
// adds a hover class
var add = function(ev){
console.log("add");
$(this).addClass("hoverstate");
};
// removes a hover class
var remove = function(ev){
console.log("remove");
$(this).removeClass("hoverstate");
};
// delegate on hover
$('.hover').on('hoverenter',add);
$('.hover').on('hoverleave', remove);
$('.hovers').bind('hoverinit',function(ev, hovered){
hovered.delay(1000);
});
$('.hovers').bind('hoverenter',add);
$('.hovers').bind('hoverleave', remove);
$('.hoverleave').bind('hoverinit',function(ev, hovered){
hovered.leave(2000);
}).bind('hoverenter',add).bind('hoverleave', remove);
});
</script>
</body>
</html>