javascript - Adding an event in a dynamically generated class on hover -
i attempting loop hover effect such image dances 4 corners of site (top left corner -> top right corner -> bottom right corner -> bottom leftcorner -> top left corner)
the way doing adding class, hoverleft, right, down, up, etc. , removing previous class. issue have dynamically added classes not recognized after page loads. have been trying work .on() function have been having difficulty. not sure why , pretty sure missing simple.
here have, html js: fiddle here: http://jsfiddle.net/5w0nk6j9/4/
<div class="bodycontainer"> <div id="kim"> <div id="dance" class="dancingkim"> <div class="header"> <h2 class="introheader">hover original</h2> </div> <img src="http://placehold.it/240x208" /> </div> </div> $('#kim').hover(function(){ $(".header h2").text("hover text"); }); $('#kim').hover(function(){ $(".dancingkim").css("cursor", "pointer"); }); $('.dancingkim').hover(function(){ $(this).addclass("hoverleft"); $(this).removeclass("dancingkim"); }); $('#kim').on('hover', '.hoverleft', function() { $('#dance').addclass("hoverdown"); $('#dance').removeclass("hoverleft"); });
in place of hover, try using mouseover or mouseenter or mouseleave.
$('#kim').on('mouseover', '.hoverleft', function() { $('#dance').addclass("hoverdown"); $('#dance').removeclass("hoverleft"); });
from jquery source code, hover not included in event list triggered leading jquery .on()
Comments
Post a Comment