2

Как добавить эффект поднятия текста при наведении на него курсора?

2 ответа 2

3

На чистом CSS это будет выглядеть так.

.fly-on-hover span{
    display: inline-block;
}

.fly-on-hover:hover span{
    // Для более плавного эффекта, если не нужно — можно удалить.
    transition: transform 300ms;
    transform: translateY(-10px);
}
<div class="fly-on-hover">
    <span>Text</span>
</div>

0

Еще вариант через позиционирование:

.container {
  margin: 20px;
}

.text {
  position: relative;
}

.text:hover {
  top: -5px;
}
<div class="container">
  <span class="text">Текст</span>
</div>

5
  • @entithat Странно, проверила сейчас в файрфоксе и хроме - вроде, ведет себя прилично)
    – maridu
    21 ноя 2017 в 20:45
  • Попробуйте чуть ниже самого текста навести, забавно:)
    – entithat
    21 ноя 2017 в 21:01
  • @entithat Да, точно, теперь поймала) Спасибо!
    – maridu
    21 ноя 2017 в 21:04
  • @maridu, Я не случайно проверяю hover на родительский блок а не на сам текст. Увеличьте высоту позиционирования и увидите что текст начнет прыгать) К тому же свойство top вызывает перерисовывание layout, этот способ стоит применять только для устаревших браузеров. 25 ноя 2017 в 11:37
  • @VasiliyRusin Спасибо, буду иметь в виду!
    – maridu
    25 ноя 2017 в 13:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.