:hover 在 Safari 中不要“悬停”答案

【问题标题】：:hover in Safari don't "hover-out":hover 在 Safari 中不要“悬停”
【发布时间】：2014-03-10 13:52:37
【问题描述】：

在 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

【问题讨论】：

您的意思是点击“点击此处关闭”后，“点击打开”文本仍为红色？如果是这样，在 Windows 下的 Safari 上无法复制。
我没有在Windows下的Safari上测试过。这是我在 Mac 上所拥有的 youtu.be/wF_g3OQALqc
好的，为好看的电影 +1。但很遗憾，我无法帮助您，因为我没有 Mac。对不起！

标签： css macos safari hover

【解决方案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>

【讨论】：