我想展示很多同班的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();       
});

这是假设只有一个popup每stor 。 否则，使用:first伪元素。 有关查找，请参见文档。

Answer 2

ID必须是唯一的，而应该使用类。 您可以仅使用css而不使用jquery来实现此结果。

 .stor { background-color: red; width: 100px; } .popup { display: none; background-color: black; width: 100px; height: 100px; color: white; } .stor:hover + .popup { display: block; } 

 <div class="stor"> user- contents <br> </div> <div class="popup">date_posted - user</div> 

Answer 3

如果需要工具提示，这已在jQueryUI中解决。 http://jqueryui.com/tooltip/

<?php foreach($posts as $post):
    $id = $post['post_id'];?>

    <div class="stor" style="background-color:red; width:100px;"
    title="<?php echo $post['date_posted'] .  " " . $post['user']; ?>">
    <?php echo $post['user'] . " " . $post['contents'] ;?>
    </div>

<?php endforeach; ?>

<script>
$(document).ready(function(){
    $('.stor').tooltip();
});
</script>