Css，Safari：悬停和子可见性答案

【问题标题】：Css, Safari :hover and child visibilityCss，Safari：悬停和子可见性
【发布时间】：2020-04-10 14:09:48
【问题描述】：

我对 Safari 有一个问题。我的页面显示了一个视频播放器，其中一些控件在鼠标移到播放器上时可见 (visibility: visible)。这种“效果”是通过一个在 Safari 下失败的简单 CSS 规则来实现的。

<div class="player">
  <!-- ... -->
  <ol class="player-controls">
    <li>Prev.</li>
  </ol>
</div>

.player-controls li {
  visibility: hidden;
}
.player:hover .player-controls li,
.player .player-controls:hover li,
.player .player-controls li:hover,
.player:fullscreen .player-controls li {
  visibility: visible;
}

我有一个完整版的 codepen：https://codepen.io/gervaisb/pen/WNQbvXE

:fullscreen 伪类也有同样的问题，我用它只全屏显示一个按钮。

当父母是 Safari 中的:hover（或:fullscreen）时，如何更改某些孩子的可见性？

谢谢

【问题讨论】：

标签： css safari hover children

【解决方案1】：

我无法找到解决方案。

所以我决定使用 JavaScript 来解决我的问题。 onmouseover 和 onmouseout 用于切换可见性。

后来我发现 Safari 不能很好地处理选择器组（有许多选择器用逗号分隔）。而且我必须复制我的样式以在其他浏览器的 Css 上保持悬停效果，并在 Safari 的类下保持另一种相同的样式。

/* This does not work
.controls button:hover,
.controls button.is-hover */
.controls button:hover {
  background-color: white;
  color: blue;
}
.controls button.is-hover {
  background-color: white;
  color: blue;
}

var controls = document.querySelectorAll('.video-controls li');
var showControls = function() {
    controls.forEach(function(control){
        control.style.visibility = 'visible';
    });
};
var hideControls = function() {
    controls.forEach(function(control){
        control.style.visibility = 'hidden';
    });
};
document.querySelectorAll('.container, .controls, .controls li, .controls button').forEach(function(el){
    el.onmouseover = showControls;
    el.onmouseout = hideControls;
});

这解决了 :hover 和 :fullscreen 等伪类的所有类似问题。

注意hideControls 和showControls 应该可以通过一个有界函数合并； el.onmouseover = setVisibility.bind('visible')。但我没试过。

【讨论】：