How to display a hover bar
Hi this is pretty basic jQuery stuff but I'm a little lost. So I have 310px images that are mostly hidden from the page with something like:
.bottom-panel {position: fixed;
width:874px;
height: 310px;
display: block;
bottom: -300px;
left: 150px;
background: url(theimg.png) transparent no-repeat;
}
only the bottom tab is 10px high up. I am trying, with the hoverIntent plugin, to create interactivity where hovering over a small tab causes the CSS to change to
bottom: 0px;
and stay "expanded" on the page as long as the mouse is somewhere inside the panel .bottom-panel
Can someone give me a small snippet or some direction to help me achieve this?
0
a source to share
1 answer
First, you can make sure the standard jQuery slant works for you:
$('.bottom-panel').hover(function() {
$(this).animate({bottom: 0}, 'fast');
}, function() {
$(this).animate({bottom: -300}, 'fast');
});
Once you've got it working the way you want it, all you have to do is replace the word "hover" with "hoverIntent" and you should be good to go.
+2
a source to share