Javascript/CSS Mouseover Area Too Sensitive

Question

Hello, I built a nav area using css (it triggers a javascript function to bring up a sub nav). The issue I'm having is my space is limited, and the navigation area is a bit finicky feeling.

http://clients.sugarpillfactory.com/fce/wp/

I'm wondering if there is a technique or method for reducing the hit area in javascript or css? Currently I'm using an image "roll up" technique for the mouseovers, where on :hover, my image (that is cut off below) rolls up about 50px to show the mouseover state.

example:

aboutButton{

display: block;
float:left;
width: 136px;
height: 49px; 
text-decoration: none;
border-style: none;
outline: none;
background-image: url(images/header_images/about_dual.png);
}

aboutButton:hover{

 background-position: 0 -49px;
}

Any suggestions greatly appreciated.

-J

Answer 1

How about an animation using jQuery?

http://api.jquery.com/animate/

Answer 2

Take a look at the Hover Intent plugin. It will only trigger hover events after the user has paused on the element for an amount of time. It is quite customisable and works very well in my experience.

Answer 3

You're not going to get the pausing via CSS alone, which works nicely btw. What you'd need/want to do, is inject via .js another .css file that removes the :hover styling and from there bind events for the hover in javascript that will show the correct sub-menu. jQuery is a pretty decent option for that.

I wouldn't remove your CSS only work, as getting what everything to run well via CSS with a no-script and no-Flash fallback is generally best for usability.