Question

我希望在悬停另一个div时显示div。现在，我知道这可以使用简单的jquery实现，但它不起作用。我正在使用javascript填充列表，如下所示：

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;
}

现在我想要的是当将鼠标悬停在coachingLinkDisplay上时，应该出现batchButton（最初显示为none）。所以我写了代码：

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

但代码无效。看起来正在使用JS填充列表，可能是上面的jquery片段失败，因为我已经尝试了正常div的片段并且正常工作。所以，我在各种博客中尝试使用css方法：

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

但又没有运气..上面的css代码有什么问题吗？请帮帮我......如何实现我的要求......？

Answer 1

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

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

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

链接没有出现在使用jquery悬停

1 个答案: