Приветствую, эксперты. Нужен совет по простой с первого взгляда задаче:
Есть контейнер с отсутствующим курсором (cursor: none).
Есть скрытый overlay в контейнере (display: none), который появляется при зажатии пробела. У overlay курсор есть (cursor: default).
Ожидаемое поведение:
При нахождении указателя мыши внутри контейнера (курсора нет) и при зажатии пробела должен появляться overlay под указателем мыши. Курсор соответственно тоже должен появляться, так как под указателем мыши находится overlay со стилем "cursor: default".
Проблема:
Курсор не появляется до тех пор, пока не сдвинешь мышь.
Наблюдения:
- В Firefox код работает с ожидаемым поведением, но не работает в Chromium браузерах.
- Если overlay скрыт не с помощью "display: none", а с помощью "visibility: hidden", то код перестаёт работать и в Firefox тоже.
- Аналогичная проблема и с псевдо-классом ":hover", который не активируется до тех пор, пока не сдвинешь мышь.
- Если запустить код здесь, во iframe, из сообщения, то код будет работать и в Chromium браузерах тоже.
Пример кода:
<!DOCTYPE html>
<head>
<style>
#container {
width: 600px;
height: 400px;
outline: 2px dashed red;
cursor: none;
}
#overlay {
width: 100%;
height: 100%;
background: lightskyblue;
cursor: default;
}
#overlay.hidden {
display: none;
}
</style>
<script>
document.addEventListener('keydown', (e) => {
if (!e.repeat && e.code === 'Space') {
overlay.classList.remove('hidden');
e.preventDefault();
}
});
document.addEventListener('keyup', (e) => {
if (!e.repeat && e.code === 'Space') {
overlay.classList.add('hidden');
e.preventDefault();
}
});
</script>
</head>
<body>
<div id="container">
<div id="overlay" class="hidden"></div>
</div>
</body>
</html>