CSS Hover Transition Сохранение содержимого в том же положении ⇐ CSS

[Anonymous]

Я добавляю несколько анимаций при наведении на карту, которую создаю как часть веб-сайта (все с помощью CSS), и, хотя она работает так, как задумано, я пытаюсь повозиться с «верхними» значениями, чтобы сам текст не двигается во время перехода. Ниже приведен фрагмент кода, который у меня есть. Это еще не все (всего будет 26 одинаковых элементов), но вот один пример, показывающий, что я пытаюсь сделать.
CSS и HTML, Нет JavaScript (стараюсь избегать языка):

Код: Выделить всё

.Container{ /* Container for Map Elements */
position: relative;
width: 100%;
height: 100%;
font-size: 0.45vw;
font-family: "p22-underground", sans-serif;
font-weight: 600;
font-style: normal;
}

.MBRAnim:hover{ /* Hover animation for Bus Routes in Map Key */
justify-content: center;
cursor: pointer;
color: white; transition: 1s;
background-color: white; padding-top: 0.1815vh; padding-bottom: 0.1815vh; top: calc(top - 0.093vw); transition: 1s;

}

a:link{
color: black;
}

a:visited{
color: black;
}

.Map81{
background-color: #997f53;
position: absolute;
top: 88.3%;
left: 4.4%;
transition-property: top;
}

Код: Выделить всё

Buses Map






[img]Test_assets\Map_Rescaled.png[/img]
 

[url=Bus_81.html]81 - Hounslow Bus Station - Slough Bus Station[/url]

Переход работает так, как ожидалось, и меня это не беспокоит, но я Я бы предпочел изменить верхнее значение, чтобы текст оставался в той же позиции Y. Я попробовал это с помощью "top:calc(top - 0.093vw);" в CSS в классе MBRAnim:hover с добавленным свойством перехода в классе «Map81», хотя у меня это не работает. Я почти уверен, что у меня правильная идея, но, возможно, где-то что-то не так, поэтому было бы неплохо быстро получить вторую пару глаз и посмотреть, не пропустил ли я что-нибудь.

Подробнее здесь: https://stackoverflow.com/questions/793 ... e-position