Databases
StackOverflow2013
Postsdbo
POIE8 div visible on hover, but vanishes when embedded select has focus
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE8 div visible on hover, but vanishes when embedded select has focus
    text
    copied!<p>I have a <code>&lt;div&gt;</code> tag that when the user hovers over it, it displays a hidden form contained within a nested <code>&lt;div&gt;</code> tag. The problem is that when the user goes to use the <code>&lt;select&gt;</code> tag inside the form, the changed focus(?) causes the browser to lose the hover on the containing <code>&lt;div&gt;</code> tag. Not a problem in every browser except our good friend IE, which reverts the nested <code>&lt;div&gt;</code> tag to its hidden state.</p> <p>Here's the JsFiddle: <a href="http://jsfiddle.net/3qVv7/3/" rel="nofollow">http://jsfiddle.net/3qVv7/3/</a></p> <p>HTML:</p> <pre><code>&lt;div id="button_box"&gt;&lt;h2&gt;Hover This&lt;/h2&gt; &lt;div id="form_box"&gt; &lt;form action="#" method="post"&gt; &lt;select id="select_option" onChange="Javascript:doSomething();"&gt; &lt;option value="a"&gt;Value A&lt;/option&gt; &lt;option value="a"&gt;Value B&lt;/option&gt; &lt;option value="a"&gt;Value C&lt;/option&gt; &lt;option value="a"&gt;Value D&lt;/option&gt; &lt;option value="a"&gt;Value E&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#button_box { display:block; width: 150px; height: 75px; position:relative; background: #ddd; } #button_box h2 { text-align: center } #button_box #form_box { display: none; position:relative; top: 51px; width: 150px; background: #ccc } #button_box:hover #form_box { display:block } #form_box select { background: #bbb }​ </code></pre> <p>Any suggestions on how I can get a select nested in a hidden div to not kill the hover state?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload