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
You can do this without javascript using css.
If you insert your hover box inside your header div you can use css :hover
to hide and show it on 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;
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.