简体   繁体   中英

link not appearing on hover using jquery

I want to make a div visible when hovering another div. Now, I know this can be implemented using simply jquery but its not working. I am populating a list using javascript as 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 what I want that when hovering over coachingLinkDisplay, batchButton should appear (whose display is none initially) . So I wrote the code :

$(document).ready(
   function() {
     $('.coachingLinkDisplay').hover(function() {
     $('.batchButton').css('display', 'block');
   }); 
});

But the code is not working. It seems as the list is being populated using JS, may be the above jquery snippet is failing as I have tried the snippet for normal div and is working properly. So, I tried to use css approach as I read in various blogs:

.coachingLinkDisplay:hover  + .batchButton{
   display:block;
}

But again no luck..is there any problem in above css code? Please help me out here...how to implement my requirement...?

You need to delegate the hover function. This is because the event handler is only bound to elements available during document ready.

$(document).on('mouseover', '.coachingLinkDisplay', function(){
    $('.batchButton').css('display', 'block');
});

Replace document with the closest static parent element.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM