I'm trying to implement this tutorial, and it works well. However, I'm trying to use a Cufon font in my menu. The font that I'm using is too small, so I need to increase the font size.
But in this case, the animation is activating when the mouse is in between two menus because the original font needed more space. (30px Arial is much bigger than my font in 30px.)
How can I restrict the hover area only to that area where the "label image" is?
Not sure if I understand your problem correctly (example would be nice), but try to set the line-height: __px;
property to exactly the amount of clickable space you want.
Or make the element containing the text a display: inline-block;
so you can set the height: __px;
and make sure the font is not blowing it up by forcing overflow: hidden;
.