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

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

以下是我的html/php wise:

<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 ++;
}

CSS:

#inventory ul {
    list-style: none;
}
#inventory li {
    background-color: #B3B4BD;
    color: white;
}

#inventory li:hover {
    background-color: #9bc2d0;
    color: black;
    cursor: pointer;
}

#inventory {
    float:left;
    width: 500px;
}

#inventory_display {
    display: none;
    margin-left: 420px;
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: #97cae6;
}

我假设我需要javascript，但是真的不知道从哪里开始。粘贴我所拥有的可能只会引起更多的混乱。

我很高兴有一个简单的悬停显示出现，但可能会寻求使悬停显示它，并点击使其静态。

谢了。如果需要更多信息，请告诉我！如果一个完整的答案太麻烦，任何地方开始，如链接等也将是有帮助的。

谢谢！

将$item['name']移动到li的rel属性中。

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

现在，我们可以使用jQuery向它添加一个元素，并显示该div内部的rel。

CSS也需要改变

#inventory li{
  background-color: #B3B4BD;
  color: white;
  /* Add this */
  position:relative;
}

新班级。

.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();
});

这是工作的小提琴

不知道这个问题提出时是否可行，但是对于一个简单的悬停文本，使用title属性就足够了。例如

echo "<li class='inventory' title='HOVER TEXT!' id='$i'>";