javascript - 我有很多相同类别的 div，我想展示它们。这个 div 在一个 div 里面，所以就像一个工具提示

Question

我是 jQuery 的菜鸟，所以我遇到了一些问题。

我有很多用 foreach (PHP) 生成的 div，像这样:

然后，我有一些工具提示 div，如下所示:

    foreach($posts as $post):
        $id = $post['post_id'];
    ?>
        <div id="stor" style="background-color:red; width:100px;">
        <?php echo $post['user'] . " " . $post['contents'] . "<br>";?></div><br>

        <div id="popup" style="display:none; background-color:black; width:100px; height:100px; color:white;"><?php echo $post['date_posted'] .  " " . $post['user']; ?></div>
        <?php
        endforeach; ?>

所以，在我的第一个“stor”div 上，我想将鼠标悬停在第一个“popup”div 上，以便显示内容。我希望我没有混淆。如果需要，我会更好地解释!

Answer 1

您必须将 id 更改为 class，因为 id 根据定义是唯一的。

你的 jQuery 看起来像这样:

$('.stor:first').on('mouseover', function(e){
  mouseenter: function () {
    $('.popup:first').show();
  },
  mouseleave: function () {
    $('.popup:first').hide();       
});

编辑:

根据您的最终评论，您实际上想要:

$('.stor').on('mouseover', function(e){
  mouseenter: function () {
    $(this).find('.popup').show();
  },
  mouseleave: function () {
    $(this).find('.popup').hide();       
});

这假设每个 stor 只有一个 popup。否则，使用 :first 伪元素。请参阅 find 的文档.