css - :hover in Safari don't "hover-out"

Question

在 Safari 上，CSS :hover 在具有固定位置的子级在父级外部打开然后关闭后仍然处于事件状态。

鼠标重新进入悬停区域后，它再次起作用。

演示: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

我在适用于 Mac 的 Chrome 34 和 FireFox 28 中对此进行了测试，我得到了这种行为。我不确定为什么这令人费解，子项总是与其父项不同，因此如果您将鼠标悬停在子项上，就会将鼠标悬停在父项上。为什么不将弹出窗口移到单独的 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>