Question

我有一个<div>标记，当用户将鼠标悬停在该标记上时，它会显示嵌套<div>标记中包含的隐藏表单。问题是，当用户在表单中使用<select>标记时，更改的焦点（？）会导致浏览器在包含<div>标记时丢失悬停。除了我们的好朋友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

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

1 个答案: