select loses focus when mouse is over options
<p>I am trying to do a hover effect as follows:</p>

<pre><code>&lt;div&gt;Some Text&lt;/div&gt;
</code></pre>

<p>should be substituted by a <code>&lt;select&gt;</code> upon mouseover. as soon as the mouse leaves that select it should display either the value previously displayed or the new selected value.</p>

<p>Unfortunately the mouseleave is called when you open the dropdown to select some options and I cannot get it to work. Has anyone had this problem before and knows the solution?</p>

<pre><code>&lt;div id="text"&gt;Some Text&lt;/div&gt;
&lt;select id="selector" style="display: none"&gt;
&lt;option value="1" selected="selected"&gt;Some Text&lt;/option&gt;
&lt;option value="2"&gt;Some More&lt;/option&gt;
&lt;option value="3"&gt;Some Other&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>the jQuery:</p>

<pre><code>$("#text").mouseover(function()
{
    $(this).hide();
    $("#selector").show();
});

$("#selector").mouseleave(function()
{
    $(this).hide();
    $("#text").show();
});
</code></pre>

<p>Can anyone let me know how I can make sure that the mouseleave isn't called when somebody is opening the select and hovers over the options?</p>

<p>BTW: It does work when the mousebutton is being pressed during the selection</p>
