Javascript 将鼠标悬停在动态列表上，在单独的div中显示相应的文本

所以，我将给你的代码很糟糕……我试图弄明白，但javascript对我来说似乎无法学习

我有一个动态生成的无序列表。当用户将鼠标悬停在每个列表项上时，我希望在单独的div中显示更多信息

以下是我对html/php的理解：

<div id="inv">
<ul>
<?php 
$i = 1;
foreach ($inv as $item) {
    echo "<li class='inventory' id='$i'>";
    echo $item['name'] . "<input type=button value='destroy'></input> ";
    echo "</li>";
    $i ++;
}
?>
</ul>
</div>
<?php 
$i = 1;
foreach ($inv as $item) {
echo "<div class='inventory_display' id='$i'>".$item['name']."</div>";
$i ++;
}

我想我需要javascript，但真的不知道从哪里开始。粘贴我的东西可能只会引起更多的混乱

我很乐意看到一个简单的悬停显示，但可能会试图使悬停显示它，并点击使其静止

谢谢。如果需要更多信息，请告诉我！如果一个完整的答案太麻烦的话，任何开始的地方，比如链接，都会很有帮助

---

谢谢

将

$item['name']

移动到

li

的

rel

属性中

echo "<li class='inventory' id='$i' rel="$item['name']">";

新班级

.li-tooltip{
  position:absolute;
  top:0;
  /* other css stuff, we'll do the width and height later. */
}

现在让我们使用jQuery做一些漂亮的事情

$('#inventory li').hover(function(){
  //this is the "mouse in"
  // find the width of the LI, so we can use that to decide positioning.
   var liW = $(this).width();
  $('<div class="li-tooltip">'+$(this).attr('rel')+'</div>').css('left', liW).appendTo($(this));
}, function(){
  //this is the "mouseout"
  $('.li-tooltip').remove();
});

$（'#inventory li'）。悬停（函数（）{
//这是“老鼠在里面”
//找到LI的宽度，这样我们就可以用它来决定位置。
var liW=$（this.width（）；
$（''+$（this.attr（'rel'）+''）.css（'left'，liW）.appendTo（$（this））；
}，函数（）{
//这是“老鼠洞”
$（'.li工具提示'）.remove（）；
});

---

首先，您的

li

和

div

将包含相同的

id

，这是badok编辑的：div id='inv'instead意味着第二个foreach循环中的div，而不是在这里包含php代码，您应该提供一个示例，让每个人都能很容易地理解您。稍微玩弄一下这个代码，我相信我可以让它工作！

.li-tooltip{
  position:absolute;
  top:0;
  /* other css stuff, we'll do the width and height later. */
}

$('#inventory li').hover(function(){
  //this is the "mouse in"
  // find the width of the LI, so we can use that to decide positioning.
   var liW = $(this).width();
  $('<div class="li-tooltip">'+$(this).attr('rel')+'</div>').css('left', liW).appendTo($(this));
}, function(){
  //this is the "mouseout"
  $('.li-tooltip').remove();
});