javascript - link not appearing on hover using jquery -
i want make div visible when hovering div. now, know can implemented using jquery not working. populating list using javascript given below :
function coachinglink(data, list) { list = list + '<div class="**coachinglinkdisplay**"><p class="coachinglink" align="left" style="color:#cd3700;">' + data.coachingname + '</p><br/>' + '<p class="title" style="color:black;font-size:14pt;">subjects : ' + subjects + '</p><br/><p class="content" align="left"></b>' + data.description + '</p></div></a><a href="batch.html?coachingid=' + data.coachingid + '" class="**batchbutton**"><b>view batches</b></a>'; return list; }
now want when hovering on coachinglinkdisplay, batchbutton should appear (whose display none initially) . wrote code :
$(document).ready( function() { $('.coachinglinkdisplay').hover(function() { $('.batchbutton').css('display', 'block'); }); });
but code not working. seems list being populated using js, may above jquery snippet failing have tried snippet normal div , working properly. so, tried use css approach read in various blogs:
.coachinglinkdisplay:hover + .batchbutton{ display:block; }
but again no luck..is there problem in above css code? please me out here...how implement requirement...?
you need delegate hover function. because event handler bound elements available during document ready.
$(document).on('mouseover', '.coachinglinkdisplay', function(){ $('.batchbutton').css('display', 'block'); });
replace document
closest static parent element.
Comments
Post a Comment