Цвет текста разрывается CSS переход - PullRequest
Новая
       68

Цвет текста разрывается CSS переход

1 голос
/ 03 августа 2020

Я не могу понять, почему это ломает его. У меня есть элемент, который использует переходы CSS для перехода в градиентный фон при наведении курсора. По какой-то причине всякий раз, когда я устанавливаю цвет текста при наведении на белый, переход прерывается? 

.social-item {
    margin-left: 0.25vw;
    padding: 0.1vw;
    transition: 0.2s;
    color: white;
}
.social-item:hover {
    background: linear-gradient(to left, #8E2DE2, #DC0486);
    color: white;
}
<a href="https://google.com" class="social-item"><i class="fab fa-keybase"></i> Keybase</a>

Я также использую Bulma и Font Awesome.

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Вы не можете просто делать переходы с фоновыми градиентами. Анимируемый CSS Свойства Используйте псевдоэлемент и выполните преобразование непрозрачности. 

.social-item {
  position: relative;
  color: white;
  z-index: 1;
}

.social-item::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to left, #8e2de2, #dc0486);
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}

.social-item:hover::before {
  opacity: 1;
}
<a href="https://google.com" class="social-item"><i class="fab fa-keybase"></i> Keybase</a>

Хорошая статья об этом. Спасибо!

0 голосов
/ 03 августа 2020

Я решил, что ваша проблема заключается в том, что вы пытаетесь выполнить градиентный переход. Не поддерживается. Но если вы хотите смоделировать это, вы можете использовать свойство opacity в css. Добавьте opacity: 0 к основному элементу (.social-item) и opacity: 1 к состоянию наведения (.social-events: hover). Следовательно, переход: 0.2 будет применяться к непрозрачности, поскольку она поддерживается, таким образом имитируя желаемый результат. Таким образом, окончательный css будет. 

.social-item {
    margin-left: 0.25vw;
    padding: 0.1vw;
    transition: 0.2s;
    color: white;
    opacity:0;
}
.social-item:hover {
    background: linear-gradient(to left, #8E2DE2, #DC0486);
    color: white;
    opacity: 1;
}

Если вы действительно хотите, чтобы объект отображался нормально, а не только при наведении курсора, тогда opacity: 0 вам не поможет. Вы должны использовать псевдоселектор: после того, как добавить фиктивный элемент в основной класс и обработать все переходы и материал градиента фона. Вот пример кода .

...