Html Safari溢出/可见性和溢出/显示错误（元素保持可见）

我在Safari浏览器渲染中遇到了一个奇怪的错误

当我将鼠标悬停在使其子元素（粉色

.pop

）可见的元素（绿色

.hover

）上时，即使悬停结束，子元素仍保持可见。它是可见的，但不可选择-我可以选择子元素后面的文本，如下面的屏幕截图所示

HTML:

这似乎是由于更改父元素的

溢出

隐藏/

可见

，以及更改子元素的

显示

无

/

块

（或

可见性

隐藏/可见

）。我在使用JavaScript时遇到了这个bug，但仅仅CSS

：hover

就可以重现它

在Safari8.0.6（10600.6.3）和9.0.1（11601.2.7.2）上测试

/*基本样式和格式*/
.悬停{
填充：10px0；
宽度：200px；
背景：绿色；
}
爸爸{
填充：20px；
高度：90px；
宽度：140px；
背景：粉红色；
}
.内容{
宽度：200px；
填充顶部：20px；
高度：100px；
背景：灰色；
}
.测试+.测试{
边缘顶部：30px；
}
/*溢流和定位*/
.悬停{
位置：相对位置；
溢出：隐藏；
}
爸爸{
位置：绝对位置；
最高：80%；
左：10px；
}
.悬停{
溢出：可见；
}
/*变化*/
.pop--显示{
显示：无；
}
.hover:hover.pop--显示{
显示：块；
}
.pop--可见性{
可见性：隐藏；
}
.hover:hover.pop--可见性{
能见度：可见；
}

让我停下来！（默认）
我将在Safari中无限期地介绍您的内容
内容
让我停下来！（显示）
我将在Safari中无限期地介绍您的内容
内容
让我停下来！（能见度）
我将在Safari中无限期地介绍您的内容
内容

我能想到的唯一解决方案是对

指针事件使用
opacity
。我期望
opacity:0；指针事件：none
与
可见性：hidden
的作用相同

但我仍然不确定这是否是一个正确的方法

相应的CSS是：

.pop--opacity {
    opacity: 0;
    pointer-events: none;
}
.hover:hover .pop--opacity {
    opacity: 1;
    pointer-events: auto;
}


/*基本样式和格式*/
.悬停{
填充：10px0；
宽度：200px；
背景：绿色；
}
爸爸{
填充：20px；
高度：90px；
宽度：140px；
背景：粉红色；
}
.内容{
宽度：200px；
填充顶部：20px；
高度：100px；
背景：灰色；
}
.测试+.测试{
边缘顶部：30px；
}
/*溢流和定位*/
.悬停{
位置：相对位置；
溢出：隐藏；
}   
爸爸{
位置：绝对位置；
最高：80%；
左：10px；
}   
.悬停{
溢出：可见；
}   
.pop--不透明度{
不透明度：0；
指针事件：无；
}
.hover:hover.pop--不透明度{
不透明度：1；
指针事件：自动；
}

让我停下来！（不透明度）
我将在Safari中无限期地介绍您的内容
内容
我能想到的唯一解决方案是对
指针事件使用
opacity
。我期望
opacity:0；指针事件：none
与
可见性：hidden
的作用相同

但我仍然不确定这是否是一个正确的方法

相应的CSS是：

.pop--opacity {
    opacity: 0;
    pointer-events: none;
}
.hover:hover .pop--opacity {
    opacity: 1;
    pointer-events: auto;
}


/*基本样式和格式*/
.悬停{
填充：10px0；
宽度：200px；
背景：绿色；
}
爸爸{
填充：20px；
高度：90px；
宽度：140px；
背景：粉红色；
}
.内容{
宽度：200px；
填充顶部：20px；
高度：100px；
背景：灰色；
}
.测试+.测试{
边缘顶部：30px；
}
/*溢流和定位*/
.悬停{
位置：相对位置；
溢出：隐藏；
}   
爸爸{
位置：绝对位置；
最高：80%；
左：10px；
}   
.悬停{
溢出：可见；
}   
.pop--不透明度{
不透明度：0；
指针事件：无；
}
.hover:hover.pop--不透明度{
不透明度：1；
指针式电动汽车
.pop--opacity {
    opacity: 0;
    pointer-events: none;
}
.hover:hover .pop--opacity {
    opacity: 1;
    pointer-events: auto;
}