Question

在Safari上，CSS：悬停在有固定位置的子项打开然后在父级之外关闭后仍处于活动状态。

鼠标重新进入悬停区域后再次运行。

演示：http://jsfiddle.net/HSC8N/2/
在MacOS上的Safari 7.0.1上测试，它也应该出现在iOS上。它至少在Chrome 32，Firefox 27，IE9和IE10上按预期工作。

编辑：以下是该问题的视频：http://youtu.be/wF_g3OQALqc

<div ng-app ng-init="show = false">
    <div class="hover-stuff">

        <div ng-click="show = true">click to open</div>

        <div class="fixed-bg" ng-show="show" ng-click="show = false">click here to close</div>
        <div class="popup" ng-show="show">Great Popup</div>

    </div>
</div>

CSS：

.hover-stuff:hover {
    background: red;
    ...
}

.fixed-bg {
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    ...
}

.popup {
    position: fixed;
    ...
}

PS：angular仅用于将display: none/block设置为.fixed-bg和.popup

Answer 1

我在Chrome 34和FireFox 28 for Mac中测试了这个，我得到了这种行为。我不确定为什么这是令人费解的，一个孩子总是除了它的父母，所以如果你将鼠标悬停在孩子身上，你将鼠标悬停在父母身上。为什么不将弹出窗口移动到单独的div中，然后你就不会遇到这个问题？

像这样：

<div ng-app ng-init="show = false">
    <div>
        <div class="hover-stuff" ng-click="show = true">click to open</div>
        <div class="fixed-bg" ng-show="show" ng-click="show = false">click here to close</div>
        <div class="popup" ng-show="show">Great Popup</div>
    </div>
</div>

：在Safari中悬停不要“悬停”

1 个答案: