0

我正在使用 php 代码从数据库中加载 div 信息：

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()功能来完成此任务，但我完全不知道如何使用它。任何有助于实现这一目标的帮助都会有所帮助。谢谢

4

2 回答 2

0

您可以在没有 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;
}

演示

于 2013-01-09T22:11:32.330 回答
0

要使用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
});

有关其他信息，请查看此帖子。

编辑

更新mouseover和mouseout稍微好一点的mouseenter和mouseleave事件。

于 2013-01-09T22:17:31.913 回答