1

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...?

4

1 回答 1

2

您需要委托悬停功能。这是因为事件处理程序仅绑定到文档准备期间可用的元素。

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

替换document为最近的静态父元素。

于 2013-07-21T14:24:25.053 回答