如何在动态生成的div字段上创建下拉菜单

Question

我使用php代码从数据库加载divs信息：

for ($i=0; $i < $stmt->rowCount(); $i++){
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $name = $row['uc_name'];
    $image_url = $row['uc_image'];
    $color = $row['uc_color'];

创建一个包含多行的框：http://jsfiddle.net/pKR5t/1/

我正在尝试为从数据库中检索到的每个项目创建一个下拉菜单。当用户将鼠标悬停在class="header"上时，下拉菜单应显示，但内部列表应与悬停的框相关：

我相信我可以使用.on()函数来完成此任务，但我完全迷失了如何使用它。任何有关完成此任务的帮助都会有所帮助。感谢

Answer 1

你可以在没有javascript的情况下使用css。

如果您将悬停框插入标题div中，则可以使用css :hover隐藏并在悬停时显示。

<强> HTML

<div class="header">
    <div class="title">PHP Row 1</div>
    <div class="hoverBox">
        <div class="hoverBoxTitle">Hover</div>
        <div class="hoverBoxContent">Hover Content</div>
    </div>
</div>

<强> CSS

.hoverBox {
    display: none;
    position: absolute;
    top: 0px;
    left: 170px;
    width:170px;
    height:90px;
    background:#333333;
    z-index: 100;
}
.header:hover .hoverBox {
    display: block;
}

<强> Demo

Answer 2

要使用on和hover，您需要使用mouseenter和mouseleave事件，如下所示：

$("div.box div.header").on("mouseenter", function() { //mouseenter event
    var currentBox = $(this).closest("div.box");
    var currentTitleText = $(this).find("div.title").html();

    //popup the list

}).on("mouseleave", function() { //mouseleave event
    //close the list
});

有关其他信息，请check this post。

修改

将mouseover和mouseout更新为稍微更好的mouseenter和mouseleave个事件。