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/

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

1 个答案:

JS