IE8 div在悬停时可见,但在嵌入式select具有焦点时消失

Question

我有一个<div>标签,当用户将鼠标悬停在它上面时,它会显示嵌套<div>标签中包含的隐藏表单.问题是,当用户<select>在表单中使用标记时,更改的焦点(？)会导致浏览器在包含<div>标记上丢失悬停.除了我们的好朋友IE之外,每个浏览器都没有问题,IE会将嵌套<div>标签恢复为隐藏状态.

这是JsFiddle:http://jsfiddle.net/3qVv7/3/

HTML:

<div id="button_box"><h2>Hover This</h2>
    <div id="form_box">
        <form action="#" method="post">
            <select id="select_option" onChange="Javascript:doSomething();">
                <option value="a">Value A</option>
                <option value="a">Value B</option>
                <option value="a">Value C</option>
                <option value="a">Value D</option>
                <option value="a">Value E</option>
            </select>
        </form>               
    </div>
</div>

CSS:

#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 
}?

关于如何在隐藏的div中嵌入选择以不杀死悬停状态的任何建议？

Answer 1

您的定位是将表单框从按钮框中取出。使用margin-top，padding-top其他一些间距方法，而不是positioning和top。此外，固定高度也#button_box带来了问题。

本质上，确保您想要显示的内容仍然包含在具有悬停样式的元素内。您可以将鼠标悬停在包含所有内容的包装 div 上，使用边距而不是固定高度和位置，以及只要所有内容都在视觉上包含的其他选项就会有所帮助。

以下是一支笔作为示例：

http://codepen.io/anon/pen/cbwEq