Javascript 我有很多相同级别的DIV，我想展示。该div位于div内部，因此类似于工具提示

我是jQuery的noob，所以我有一些问题

我使用foreach（PHP）生成了许多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; ?>

然后，我有一些工具提示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; ?>

foreach（$posts as$post）：
$id=$post['post_id']；
?>

---

因此，在我的第一个“stor”div中，我想将鼠标悬停在上面，以便第一个“popup”div显示内容。我希望我没有弄糊涂。如果需要，我会解释得更好

ID

s必须是唯一的，您应该改用类。只有在不使用jquery的情况下，才能使用css实现此结果

.stor{
背景色：红色；
宽度：100px；
}
.弹出窗口{
显示：无；
背景色：黑色；
宽度：100px；
高度：100px；
颜色：白色；
}
.stor：悬停+弹出窗口{
显示：块；
}

用户内容


发布日期-用户ID必须是唯一的，您应该使用类。只有在不使用jquery的情况下，才能使用css实现此结果


.stor{
背景色：红色；
宽度：100px；
}
.弹出窗口{
显示：无；
背景色：黑色；
宽度：100px；
高度：100px；
颜色：白色；
}
.stor：悬停+弹出窗口{
显示：块；
}

用户内容


发布日期-用户
您必须将
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
只有一个
弹出窗口。否则，请使用
：first
伪元素。请参阅文档。
您必须将
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
只有一个
弹出窗口。否则，请使用
：first
伪元素。请参阅文档。
如果您想要工具提示，这已经在jQueryUI中解决了


$（文档）.ready（函数（）{
$（'.stor'）.tooltip（）；
});
如果您想要工具提示，jQueryUI已经解决了这一问题


$（文档）.ready（函数（）{
$（'.stor'）.tooltip（）；
});
您只想在第一个stor中使用该行为？反复使用相同的“id”值无效。请将您的
id
更改为class，并使用选择器
$（'.popup:first'）
我需要使用“this”，因为如果我想悬停“stor”，我需要第一个“popup”。如果我将鼠标悬停在第二个“stor”上，我想要第二个“popup”。我写了这样的东西：这是一个打印屏幕：你想要第一个stor的行为？反复使用相同的“id”值是无效的。将你的
id
更改为class，并使用选择器
$（'.popup:first'）
我需要使用“this”，因为如果我想悬停“stor”，我想要第一个“popup”。如果我将鼠标悬停在第二个“stor”上，我想要第二个“popup”。我写了这样的东西：它是一个打印屏幕：