Css, Safari :hover and child visibility

问题

I have one issue with Safari. My page displays a video player with some controls that are made visible (visibility: visible) when the mouse move over the player. This "effect" is achieved with a simple CSS rule that fails under Safari.

<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;
}

I have a codepen with the full version: https://codepen.io/gervaisb/pen/WNQbvXE

I have the same issue with the :fullscreen pseudo class that I use to display one button in fullscreen only.

How can I change the visibility of some childs when the parent is :hover (or :fullscreen) within Safari ?

Thanks

回答1:

I was not able to find a solution.

So I decided to use JavaScript to solve my issue. onmouseover and onmouseout are used to toggle the visibility.

Later I found that Safari does not play well with selector groups (having many selectors separated by a comma). And I had to duplicate my style to keep the hover effect on Css for other browsers and another identical style under a class for 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;
});

This solved all the similar issues with pseudo classes like :hover and :fullscreen.

Note that hideControls and showControls should be mergeable via one bounded function; el.onmouseover = setVisibility.bind('visible'). But I did not tried.

来源：https://stackoverflow.com/questions/61142068/css-safari-hover-and-child-visibility

标签

css

safari

hover

children