Css, Safari: зависание и видимость детей - PullRequest
Новая
       34

Css, Safari: зависание и видимость детей

0 голосов
/ 10 апреля 2020

У меня есть одна проблема с Safari. На моей странице отображается видеопроигрыватель с некоторыми элементами управления, которые становятся видимыми (visibility: visible) при наведении мыши на плеер. Этот «эффект» достигается с помощью простого правила CSS, которое не работает в 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;
}

У меня есть кодовая ручка с полной версией: https://codepen.io/gervaisb/pen/WNQbvXE

У меня та же проблема с псевдоклассом :fullscreen, который я использую для отображения только одна кнопка в полноэкранном режиме.

Как я могу изменить видимость некоторых детей, когда родительский номер :hover (или :fullscreen) в Safari?

Спасибо

1 Ответ

0 голосов
/ 15 апреля 2020

Мне не удалось найти решение.

Поэтому я решил использовать 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'). Но я не пробовал.

...