5

我有一个<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 中以不终止悬停状态的任何建议？

4

1 回答 1

0

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

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

这是一支笔用作示例：

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

于 2014-08-15T15:47:36.510 回答