Шатко при использовании CSS-преобразования по ссылке - PullRequest
Новая
       10

Шатко при использовании CSS-преобразования по ссылке

0 голосов
/ 19 февраля 2019

У меня есть нижний колонтитул навигации.Навигация - это неупорядоченный список, имеющий шесть элементов списка, каждый из которых имеет тег привязки или ссылки.

Теперь мой вопрос заключается в том, что, когда я наводю указатель мыши на элемент списка, который по сути является ссылкой (переводит -3px по оси Y-> в соответствии с кодом CSS), но когда он возвращается к ссылке или нормальному состоянию, текст ссылки перемещается вверх и вниз.

Что вызывает это ненормальное поведение?

Мой новый опыт работы с CSS и HTML.

Я где-то читал о (видимость задней поверхности: скрытый;), но не знаю, как его использовать и где его можно как-то решитьЭта проблема, но, как я уже говорил ранее, я начинаю с CSS, поэтому немного запутался, как он работает.

enter image description here

.nav {
  list-style: none;
  padding: 4rem;
  background-color: #101d2c;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

.nav__link:link,
.nav__link:visited {
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  display: block;
  transition: all .2s;
}

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px);
}
<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
</ul>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Я не знаю почему, но когда у меня возникает эта проблема, я использую backface-visibility: hidden;, и это обычно решает проблему.

0 голосов
/ 19 февраля 2019

Я не могу объяснить вам, почему CSS-преобразование не является плавным, но это обычная проблема, которую я замечаю по всему Интернету ежедневно.В CSS есть много странных ошибок и недостатков, и в настоящее время это один из них.

Вот обходной путь для вашей проблемы, так что вы можете, по крайней мере, достичь того, чего хотите, без шаткого текста:

Удалите преобразование CSS и добавьте отрицательное верхнее поле: 

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px); <-- remove this line
  margin-top: -6px; <-- add this line
}

Я использовал 6px отрицательного верхнего поля (-6px), потому что это очень похоже на использование 3px преобразования CSS-преобразования.

https://codepen.io/anon/pen/yZweLp?editors=1100#0

...