Question

所以，我给你的代码很可怕......我试图解决这个问题，但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，但实际上不知道从哪里开始。粘贴我所拥有的东西可能只会引起更多混乱。

我会很高兴看到一个简单的悬停显示，但可能会想要将鼠标悬停显示出来，然后点击一下就可以显示它。

感谢。如果需要更多信息，请告诉我！如果对于完整答案来说太麻烦了，那么任何起点，如链接等都会有所帮助。

谢谢！

Answer 1

将$item['name']移至rel的{{1}}属性。

li

现在，我们可以使用jQuery向其追加一个元素，并在该div中显示rel。

CSS也需要改变

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

新班。

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

现在让我们使用jQuery做一些漂亮的东西。

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

<强> Here is the working jsFiddle

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

1 个答案: