У меня есть элемент, который масштабируется с помощью преобразования при наведении курсора. Это замечательно, но масштабирование его по числу stati c не очень полезно, если я хочу, чтобы веб-сайт можно было просматривать в браузерах / экранах разных размеров. Код сейчас выглядит так:
<!DOCTYPE html>
<html>
<head>
<script>
{
const w = window.innerWidth/200;
const h = window.innerHeight/200;
}
</script>
<style>
.botright
{
width: 100px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
background: pink;
transition: transform 500ms ease-in-out;
transform-origin: left top;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
.botright:hover
{
transform: scaleX(w) scaleY(h);
font-size: 0;
}
Важные биты находятся вверху и внизу кода (js и :hover). Я не могу использовать константы w или h, созданные в javascript, где-либо еще в css, а js не работает внутри или не охватывает :hover, поэтому я вроде как не понимая, как заставить элемент расширяться до размера относительно длины и ширины окна просмотра.
Число c в scale() будет работать, если сам элемент был масштабирован до размер окна, но это привело к некоторым другим проблемам и, что более важно, это не то, что я хочу сделать.
Текущая функциональная версия действительно использует простое число для масштабирования элемента, но потому что элемент всегда 100 пикселей x 100 пикселей (и я намеренно использую пиксели, потому что я всегда хочу, чтобы элемент был квадратом, когда он не зависает ни на что), масштабирование просто делает квадрат большего размера.
Я ищу способ чтобы масштабировать квадрат так, чтобы при наведении указателя мыши он всегда находился go точно до самого края доступного пространства окна.