将鼠标悬停在选择和选项上的 IE 错误

Question

我正在尝试在 div 上进行悬停，但是当我悬停选项时，div 的悬停会受到影响。

示例代码：

<div class="levelThreeMenuColumnTwo" id="clientFormMenu">
    <div class="formMenuPFS">
        <select name="select1">
            <option value="TN">
                Tennessee
            </option>
            <option value="VA" selected="selected">
                Virginia
            </option>
            <option value="WA">
                Washington
            </option>
            <option value="FL">
                Florida
            </option>
            <option value="CA">
                California
            </option>
        </select>
    </div>
 </div>
<style>
.formMenuPFS{
    display:none;
    background-color:red;
    width:110px;
    height:110px;
    position:absolute;
    left:200px;
}
.levelThreeMenuColumnTwo:hover .formMenuPFS{
    display:block;
}
.levelThreeMenuColumnTwo{
    display:block;
    background-color:green;
    width:200px;
    height:200px;
}
</style>

在 FF 中工作，但不在 IE 中。

正确的行为： 当悬停绿色 div 时显示红色 div。 当悬停选择或选项时，一直显示红色 div。

如果需要 javascript，我可以使用 dojo 1.4。 谢谢。

Answer 1

我知道这是一个老问题，但我遇到了同样的问题，我在你的 jsbin 中通过以下方式修复了它。我没有使用 CSS :hover，而是使用了 jQuery 悬停并添加了 event.stopPropagation() 选择。

JS

$(document).ready(function(){
    $(".levelThreeMenuColumnTwo").hover(function() {
        $('.formMenuPFS').show();
        $('.formMenuPFS select').mouseleave(function(event) { event.stopPropagation(); });
    }, function() {
        $('.formMenuPFS').hide();
        $('.formMenuPFS select').mouseleave(function(event) { event.stopPropagation(); });
    });
});

jsbin http://jsbin.com/xitafazoca/