Javascript 使用jquery悬停时未显示链接

我想让一个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;
}

但代码不起作用。似乎列表是使用JS填充的，可能是上面的jquery代码段失败了，因为我尝试了普通div的代码段，并且工作正常。因此，当我在各种博客中阅读时，我尝试使用css方法：

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

---

但同样没有运气..上面的css代码有什么问题吗？请在这里帮助我…如何实现我的要求…？

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

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

---

将

document

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

这是有效的…但我无法理解如何…我的意思是你的方法和我的方法有什么不同？@vladhalmer之所以有效，是因为你正在将元素动态添加到DOM中，这意味着在页面加载时它们不可用。静态事件处理程序将仅绑定到激发

$（document）.ready（）

时可用的元素。如果元素不存在，那么您需要一个动态事件处理程序，这正是

.on（）

首先提供静态元素时所做的，即

$（document）

，然后使用

.coachingLinkDisplay

作为您希望将动态事件委托给的元素。感谢您的澄清……）

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