What's a simple way to decrease sensitivity surrounding an onmouseover element without affecting layout?
<p>I have several onmouseover events (combination of javascript functions and jquery accordions) but they seem to be overly sensitive to the exact location of the mouse to the point that it's making it either very difficult to trigger and/or overly easy to mouseout and close the function (making it very difficult to select something and/or to inadvertently trigger the wrong function). I'm working with a very tight layout so I can't increase the space between elements.</p>

<p>What's a simple way to either expand the area that will trigger a function or decrease the sensitivity surrounding a mouseover element without affecting the layout? I've tried playing with the margins and padding and it hasn't seemed to help.</p>

<p>I've included below one example of this in a javascript function that I'm using in the menu.</p>

<pre><code># HTML #
&lt;a style="top:13px; left:43px; position:absolute; z-index:31" href="createaccount.html"&gt;Create Account &lt;/a&gt;

&lt;ul class="menu" style="top:2px; left:99px; position:absolute;"&gt; 
&lt;li&gt;&lt;a style=" text-align: left;" href="createaccount.html" onmouseover="mopen('m1')" onmouseout="mclosetime()"&gt;&amp;#x25B6;&lt;/a&gt;

&lt;div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"&gt;
&lt;a href="mybody.html" style="top:-9px; left: 16px"&gt;Quick Start&lt;/a&gt;  
&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;

# Javascript #
var timeout = 150;
var closetimer = 0;
var ddmenuitem = 0;

function mopen(id) {
mcancelclosetime();
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose() {
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime() {
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime() {
if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
} 
}
document.onclick = mclose;

# CSS #
.menu div { 
position: absolute; visibility: hidden; margin: 0px 0px 0px 7px; padding: 0; width: 120px; height:62px; background: black;}

    .menu div a {position: relative; display: block; padding: 0px 0px 0px 0px; margin: -3px 0px 0px -9px; width: 105px; text-align: left; text-decoration: none; background: black; color: white; }
</code></pre>
