CODEWITHSUNDEEP
jquerycss
Zac
Zac

Reputation: 12836

How to show panel with hoverintent

Hi this is pretty basic jQuery stuff but i am a little lost. So i have a 310px images that is 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 little 10px high tab is sticking up at the bottom. I am trying, with the hoverIntent plugin, to create interactivity where hovering over the little tab causes the CSS to change to 

bottom: 0px;

and stay "expanded" on the page as long as the mouse is anywhere within the .bottom-panel

Can someone give me a little snippet or some direction to help me achieve this?

Upvotes: 1

Views: 484

Answers (1)

Elliot Nelson
Elliot Nelson

Reputation: 11557

First off, you could make sure jQuery's standard hover works for you:

$('.bottom-panel').hover(function() {
  $(this).animate({bottom: 0}, 'fast');
}, function() {
  $(this).animate({bottom: -300}, 'fast');
});

Once you've got that working the way you want it, all you need to do is replace the word 'hover' with 'hoverIntent', and you should be good to go.

Upvotes: 3

Related Questions