Way to activate hover when in the vicinity of the element

I have a bunch of elements on a page that when hovered show a menu. Because hovering requires to be on the element an开发者_如何学JAVAd if you are right at the border it gets very tricky to activate them iIwas wondering if there is a way to activate the hover menu when the mouse is close to the element, let's say at a tolerance rate of 10 pixels from any border (N,S,E,W).

Tracking the mouse on the page is really not an option, too much processing needed on the client side and the page is already loaded with lots of javascript code.

---

I think wrapping the menu item content with a div / span element and then applying the hover styles to that would work best. And then as Sime said, increase the padding on the menu item.

For example the html would be:

<ul class="menu">
   <li><span>content here</span></li>
</ul>

Then the CSS would be something like:

li {
     padding:10px;
}

li:hover span {
      /* Hover style of menu item here */
}