Css，Safari：悬停和子可见性

Question

我在使用 Safari 时遇到了一个问题。我的页面显示了一个视频播放器，其中一些控件在鼠标移到播放器上时可见 (visibility: visible)。这个 "effect" 是通过在 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;
}

我有完整版的代码笔：https://codepen.io/gervaisb/pen/WNQbvXE

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

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

谢谢

Answer 1

我找不到解决方案。

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

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

/* 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;
});

这解决了伪 class 的所有类似问题，例如 :hover 和 :fullscreen。

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

Css，Safari：悬停和子可见性

Css, Safari :hover and child visibility

css

safari

children

hover