Question

I am loading divs with information from the database using php code:

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'];

The creates a box for however many rows there are: http://jsfiddle.net/pKR5t/1/

I am trying to create a drop down menu for each item retrieved from the database. When the user hovers over class="header", the drop down menu should show but the list inside should be pertaining to that of the box hovered:

I believe I can use the .on() function to accomplish this but I am completely lost on how to use it. Any help on getting this accomplished would be helpful. Thanks

Answer 1

To use on and hover you will want to use the mouseenter and mouseleave events like so:

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

For some additional info, check this post.

EDIT

Updated mouseover and mouseout to the slightly better mouseenter and mouseleave events.