0

所以，我会给你的代码很糟糕......我试图弄清楚，但 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 ++;
}

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，但真的不知道从哪里开始。粘贴我所拥有的可能只会引起更多的混乱。

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

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

谢谢！

4

1 回答 1

2

移入$item['name']的rel属性li。

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

这是工作的jsFiddle

于 2012-06-28T14:44:52.763 回答