javascript - JQuery Hover 仅显示多个元素的第一个隐藏 Div

Question

我正在从数据库中提取标题和描述，并且我希望在标题悬停时弹出描述。出于某种原因，当我将鼠标悬停在任何链接上时，相同的描述不断弹出。我无法弄清楚我做错了什么！

这是php：

<?php foreach ($updateInfo['updates'] as $update) {
    echo "</td><td>". $update['fldLeadText'].' <a class="small popper" href="">Read more...</a> <div id="pop">
          <p>'.$update['fldBodyText'].'</p>
          </div>';
    ...

jQuery：

$(function() {
    $('a.popper').hover(function() {
        $('#pop').toggle();
    });
});

和CSS：

#pop{
    display              : none;
    position             : absolute;
    z-index              : 99999;
    padding              : 10px;
    background           : #ffffff;
    border               : 1px solid #A2ADBC;
}

标签： javascriptphpjquery

Answer 1

在循环中添加元素并为它们提供 ID 时，您将面临重复 IDS 的风险，这将导致此问题。

ID 必须是唯一的，因此您不能在同一页面上重复使用相同的 ID。但是你可以重用类。

更改id="pop"为class="pop"

在你的 jquery 中改变它：

   $('a.popper').hover(function() {
        $(this).next(".pop").toggle();
    });

将#pop您的 CSS 更改为.pop